Invalid code formatting on shared pages caused by unescaped HTML

[calebroelens]

Description

The note is configure like this in the backend:

On the shared note page, the note looks like this:

Raw HTML copied from shared page:

<code class="language-text-xml hljs"><span class="hljs-variable">&amp;lt</span>;t t-name=<span class="hljs-string">"module.SectionWidthOption"</span><span class="hljs-variable">&amp;gt</span>;
 <span class="hljs-variable">&amp;lt</span>;BuilderRow <span class="hljs-keyword">label</span>.translate=<span class="hljs-string">"Section Width"</span><span class="hljs-variable">&amp;gt</span>;
     <span class="hljs-variable">&amp;lt</span>;BuilderSelect<span class="hljs-variable">&amp;gt</span>;
         <span class="hljs-variable">&amp;lt</span>;BuilderSelectItem classAction=<span class="hljs-string">"''"</span><span class="hljs-variable">&amp;gt</span>;/<span class="hljs-variable">&amp;lt</span>;/BuilderSelectItem<span class="hljs-variable">&amp;gt</span>;
         <span class="hljs-variable">&amp;lt</span>;BuilderSelectItem classAction=<span class="hljs-string">"'s_container'"</span><span class="hljs-variable">&amp;gt</span>;Small<span class="hljs-variable">&amp;lt</span>;/BuilderSelectItem<span class="hljs-variable">&amp;gt</span>;
         <span class="hljs-variable">&amp;lt</span>;BuilderSelectItem classAction=<span class="hljs-string">"'c_container'"</span><span class="hljs-variable">&amp;gt</span>;Medium<span class="hljs-variable">&amp;lt</span>;/BuilderSelectItem<span class="hljs-variable">&amp;gt</span>;
         <span class="hljs-variable">&amp;lt</span>;BuilderSelectItem classAction=<span class="hljs-string">"'f_container'"</span><span class="hljs-variable">&amp;gt</span>;Large<span class="hljs-variable">&amp;lt</span>;/BuilderSelectItem<span class="hljs-variable">&amp;gt</span>;
     <span class="hljs-variable">&amp;lt</span>;/BuilderSelect<span class="hljs-variable">&amp;gt</span>;
 <span class="hljs-variable">&amp;lt</span>;/BuilderRow<span class="hljs-variable">&amp;gt</span>;
<span class="hljs-variable">&amp;lt</span>;/t<span class="hljs-variable">&amp;gt</span>;</code>

Source copied from the backend (Note source menuitem):

<code class="language-text-xml">&lt;t t-name="module.SectionWidthOption"&gt;
 &lt;BuilderRow label.translate="Section Width"&gt;
     &lt;BuilderSelect&gt;
         &lt;BuilderSelectItem classAction="''"&gt;/&lt;/BuilderSelectItem&gt;
         &lt;BuilderSelectItem classAction="'s_container'"&gt;Small&lt;/BuilderSelectItem&gt;
         &lt;BuilderSelectItem classAction="'c_container'"&gt;Medium&lt;/BuilderSelectItem&gt;
         &lt;BuilderSelectItem classAction="'f_container'"&gt;Large&lt;/BuilderSelectItem&gt;
     &lt;/BuilderSelect&gt;
 &lt;/BuilderRow&gt;
&lt;/t&gt;</code>

The above is an example. Shared pages fail to render correctly any code block containing a '<', '>' or any character required to be escape by HTML.

Is there an option to show the note correctly, or do I require some configuration, or perhaps a custom widget?

TriliumNext Version

v0.99.5

What operating system are you using?

Ubuntu

What is your setup?

Server access only

Operating System Version

Ubuntu 22.04

Error logs

No error logs, visual error.

[dosubot]

Hi @calebroelens! I'm Dosu and I’m helping the Trilium team.

This is a known limitation in TriliumNext: code blocks on shared pages do not always escape HTML characters like < and >, which can cause formatting issues, especially for XML or HTML-like code. There isn't a built-in setting or widget to fix this in v0.99.5. The shared view only applies basic CSS to code blocks and does not include full syntax highlighting or robust escaping by default. Even if you set the language for a code block, the shared page won't load the necessary scripts for proper highlighting or escaping out of the box [source].

Workarounds:

• For plain code sharing, you can create a note of type "code", paste your content, set it to "Read-only", and change the note type to "Text". Then, either add the #shareRaw attribute or append ?raw=true to the share URL to display the code as raw text without the share interface [source].
• For better formatting or syntax highlighting, you can inject your own CSS/JS (for example, Highlight.js and its stylesheet) using the ~shareJs and ~shareCss relations on the note or its subtree [source].
• You can also inject custom HTML snippets into the shared page using the ~shareHtml relation and control placement with the #shareHtmlLocation label (e.g., head:end, content:start) [source].

If you need step-by-step instructions for any of these workarounds, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[calebroelens]

Thx to the shareJs tip, I have created this small script:

async function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

async function getRawDocument() {
    let currentUrl = new URL(window.location.href);
    currentUrl.search = "raw=true";
    let rawContent = await fetch(currentUrl.toString());
    let rawText = await rawContent.text();
    let parser = new DOMParser();
    return parser.parseFromString(rawText, "text/html");
}

/**
 * Recursively resolves an element (code or include-note) and returns its code snippets
 */
async function resolveElement(element) {
    if (element.tagName === 'CODE') {
        return [element.textContent];
    } else if (element.classList.contains('include-note')) {
        let noteId = element.getAttribute('data-note-id');
        let currentUrl = new URL(window.location.href);
        // Replace the last path segment with the noteId
        let pathParts = currentUrl.pathname.split('/');
        pathParts[pathParts.length - 1] = noteId;
        currentUrl.pathname = pathParts.join('/');
        currentUrl.search = "raw=true";

        let response = await fetch(currentUrl.toString());
        let noteText = await response.text();
        let noteParser = new DOMParser();
        let noteDocument = noteParser.parseFromString(noteText, "text/html");
        // Process the included note's elements in order
        let snippets = [];
        let elements = noteDocument.querySelectorAll('code, section.include-note');
        for (let el of elements) {
            snippets.push(...(await resolveElement(el)));
        }
        return snippets;
    }
    return [];
}

/**
 * Collects all code snippets in document order
 */
async function getAllCodeSnippetsInOrder() {
    let doc = await getRawDocument();
    let elements = doc.querySelectorAll('code, section.include-note');
    let allSnippets = [];
    for (let el of elements) {
        allSnippets.push(...(await resolveElement(el)));
    }
    return allSnippets;
}

function guessLanguageClass(el){
    if(!el.className){
        return "";
    }
    let languageClass = el.className.split(" ").find(cls => cls.startsWith('language'));
    if(!languageClass){
        return "";
    }
    // For 90% this should be Ok
    let parts = languageClass.split('-');
    let lang = parts[parts.length - 1];
    // eslint-disable-next-line
    if(hljs.getLanguage(lang)){
        return `language-${lang}`;
    } else {
        // Use fallback
        if(languageClass.includes("javascript")){
            return "language-javascript";
        }
        return "";
    }
}

async function init(){
    await loadScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js");
    try{
        let codeSnippets = await getAllCodeSnippetsInOrder();
        if(codeSnippets && codeSnippets.length > 0){
            let currentCodeElements = document.querySelectorAll('code');
            currentCodeElements.forEach((el, index) => {
                if (index < codeSnippets.length) {
                    el.textContent = codeSnippets[index];
                    el.className = guessLanguageClass(el);
                    // eslint-disable-next-line
                    hljs.highlightElement(el);
                }
            });
        }
    } catch (e) {
        console.error("Could not resolve snippets:", e);
    }
}

document.addEventListener("DOMContentLoaded", init);

Additional for theme:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
    <link rel="stylesheet" id="hljs-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <script/>
        const themeMap = {
            'theme-dark': 'github-dark',
            'theme-light': 'github'
        };
        function updateTheme() {
            const htmlClass = document.documentElement.className;
            const theme = themeMap[htmlClass] || 'github-dark'; // default to dark if class not set
            document.getElementById('hljs-theme').href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/${theme}.min.css`;
        }
        updateTheme();
        const observer = new MutationObserver(updateTheme);
        observer.observe(document.documentElement, { attributes: true });
    </script>
</head>

Using inheritance I added this to all my pages. I did lose my highlighting, but the code shows correctly. I might manually readd the highlighting later on and edit this comment with an extended solution.

Edit: Extend with reading inline snippets (no code tag in raw content, fetch notes in raw content, loop).
Edit2: Added highlight JS support
Edit3: Added HTML

[eliandoran]

Nice that you found a workaround but it still sounds like a problem we need to fix.