Prism.js partially working! Color changes but without highlighting code

I am building a markdown previewer and when I create a code block in markdown (inside of editor div), I want it to have a highlighted style inside of a preview div.

So I decided to use Prism.js.(I tried highlight.js before, didn’t work).

But, with Prism I made it work partially, My code has changed color, but it was all the same color and no highlight being applied.

Here is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="./prism.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
        <title>Markdown Previewer</title>
    </head>
    <body>
        <div class="container">
            <div class="editor">
                <div id="ed-navbar" class="navbar">
                    EDITOR
                </div>
                <textarea name="markdown"></textarea>
            </div>
            <div class="preview">
                <div id="pr-navbar" class="navbar">
                    PREVIEW
                </div>
                <div class="prev-text">
                    
                </div>
            </div>
        </div>
        <script type="module" src="./index.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <script src="prism.js"></script>
    </body>
</html>

JS:

const $ = document.querySelectorAll.bind(document);

const mrk = new Request('sample.md');

fetch(mrk)
    .then(data => data.text())
    .then(text => {
        $('textarea')[0].innerHTML = text;
        $('.prev-text')[0].innerHTML = marked(text, {renderer: renderer})
    });

marked.setOptions({
    breaks: true
});

let renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
    return `<a target="_blank" href="${href}">${text}` + `</a>`
}
renderer.code = function(code, infostring, escaped) {
    return `<pre><code class="language-javascript">${code}` + `</code></pre>\n`;
}

let txtArea = $('textarea')[0];
txtArea.addEventListener('input', event => {
    $('.prev-text')[0].innerHTML = marked(event.target.value, {renderer: renderer})
});

Moved this to the JavaScript subforum where it will get more eyes on

1 Like

I imagine it has to re-run every time the DOM changes.

I can get it to work if I call Prism.highlightAll() after the call to marked. You can also target a container using highlightAllUnder or pass in the element to highlightElement.

https://prismjs.com/docs/Prism.html#.highlightAll

2 Likes

I am sorry for asking this dumb question, but where do I put the Prism.highlightAll() ?
Is it inside a html or inside a js file?

Let me ask you this, where do you call the function marked?

Every time you call marked you are updating the DOM with new content and the highlighter needs to re-parse the DOM.

1 Like

Ahhh now I get it, I found the spot where it should go and it works.
But my inline code is not working.
Only the code tag that is inside pre tag is getting highlighted.

Looks like you can use the codespan inline level tokenizer method the same way you use code.

renderer.code = function (code) {
  return `<pre><code class="language-javascript">${code}` + `</code></pre>\n`;
};

renderer.codespan = function (code) {
  return `<pre><code class="language-javascript">${code}` + `</code></pre>\n`;
};
1 Like

Thank You so much Sir, how do You even obtain this kind of knowledge?
I feel like I am miles off.

1 Like

I look at the docs for long enough and play with the code. But I did have to try a few things before I landed on this solution.

It can be frustrating at times but you just have to try stuff out. Persistence and a bit of stubbornness go a long way.

1 Like

I agree on that :laughing:.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.