asciidoctorhighlightjs

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

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.

Solution

  • 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)
        }