highlight.js doesn't highlight on markup load from JavaScript event

Question

highlight.js doesn't highlight on markup load from JavaScript event

2.2k Views Asked by John D At 27 July 2020 at 12:19

When I put a code manually in html, highlight.js work perfectly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="asciidoc.css">
    <link rel="stylesheet" href="pygments.css">
    <link rel="stylesheet" href="highlightjs-theme.css">
</head>
<body>
    <pre><code>
        using System;
        static void Main(string[] args)
        {
            // Display the number of command line arguments.
            Console.WriteLine(args.Length);
        }   
    </code></pre>
    <script type="text/javascript" src="highlight.min.js"></script>
    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>

alt text But when I use asciidoctor.js to convert markup to html highlighter doesn't work on the generated html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="asciidoc.css">
    <link rel="stylesheet" href="pygments.css">
    <link rel="stylesheet" href="highlightjs-theme.css">
</head>
<body>
    <!-- static c# code-->
    <pre><code class="csharp">
        using System;
        static void Main(string[] args)
        {
            // Display the number of command line arguments.
            Console.WriteLine(args.Length);
        }   
    </code></pre>

    <textarea col=20 rows=3 id="raw_code" onkeyup="preview()"></textarea>
    <!-- Dynamic c#-->
    <div id="target"></div>
    
    <script src="asciidoctor.min.js"></script>
    <script type="text/javascript" src="highlight.min.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad();
        function preview(){
            var content = document.getElementById('raw_code').value
            var asciidoctor =  Asciidoctor();
            const html = asciidoctor.convert(content,{doctype: 'article' ,safe: 'safe',header_footer: false,  attributes: { 'source-highlighter': 'highlightjs' }})
            document.getElementById('target').innerHTML = html;
        }
    </script>
</body>
</html>

Result after the above code alt text We can see that the code insert on key press doesnot highlight but the code insert manually when the page was load is highlight.

Original Q&A

There are 1 best solutions below

**eskwayrd** · Accepted Answer · 2020-08-03T20:44:04.347000

Your call to hljs.initHighlightingOnLoad() comes before the Asciidoc markup is converted to HTML, so the HTML isn't in the DOM when hljs does its work.

Also, it looks like you'll want to include a call to hljs in the preview() function so that the syntax highlighting isn't lost on each keypress in the raw_code textarea:

        function preview(){
            var content = document.getElementById('raw_code').value
            var asciidoctor =  Asciidoctor();
            const html = asciidoctor.convert(content, {
                doctype: 'article',
                safe: 'safe',
                header_footer: false,
                attributes: {
                    'source-highlighter': 'highlightjs'
                }
            })
            var target = document.getElementById('target')
            target.innerHTML = html
            hljs.highlightBlock(target)
        }

highlight.js doesn't highlight on markup load from JavaScript event

There are 1 best solutions below

Related Questions in ASCIIDOCTOR

Related Questions in HIGHLIGHTJS

Trending Questions

Popular # Hahtags

Popular Questions