appml / neutrinote

neutriNote - the original extensible Markdown + Math note app. Non-commerical. No lock-ins. Only 3 MB footprint & highly optimized. Designed for plaintext purists.
GNU General Public License v3.0
339 stars 23 forks source link

Rendering issues using examples from https://appml.github.io/nano/ #8

Closed rancidfrog closed 2 years ago

rancidfrog commented 2 years ago

Context fill does not accept hex values, For example, using #660c21 should give a dark red colour square,

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#660c21";
ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

Also, Using example from - https://appml.github.io/nano/

<canvas id="example" width="200" height="200">
</canvas>

<head>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</script>  
</head>

Red works fine,

But hex values gives a black square.

There seems to be issues with rendering, as when I added another example before canvas tag,

<style>
    .div-1 {
        background-color: #EBEBEB;
    }

    .div-2 {
        background-color: #ABBAEA;
    }

    .div-3 {
        background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

All of a sudden colour changes correctly for rectangle, but not for example that was added.

Also, changing values in recatangle causes it to disappear completely Rendering is not consistent.

Is there a way to set background colour?

appml commented 2 years ago

To display raw html, consider disabling internal markdown engine (which has its own minimal css rendering and prettify logic) by defining a metadata pattern with com.appmindlab.nano.pref_safe_mode_tag.

For example, safe is defined as the safe mode metadata. Assigning safe as the note's metadata would disable the styling from the markdown engine for this note.

Screenshot_20210921-052601

rancidfrog commented 2 years ago

I tried, but it did not change anything

appml commented 2 years ago

@rancidfrog Please try:

  1. Perform Backup App Data (side navigation panel)
  2. Settings -> Show Hidden -> open the note called "~neutrinote_settings_data.txt" -> add this line:

com.appmindlab.nano.pref_safe_mode_tag|safe

  1. Perform Restore App Data
  2. Then add safe to your note metadata
appml commented 2 years ago

@rancidfrog Please try:

  1. Perform Backup App Data (side navigation panel)
  2. Settings -> Show Hidden -> open the note called "~neutrinote_settings_data.txt" -> add this line:

com.appmindlab.nano.pref_safe_mode_tag|safe

  1. Perform Restore App Data
  2. Then add safe to your note metadata

Closing with the provision of instruction to resolve this issue.