highlight.js 不会突出显示来自 JavaScript 事件的标记加载

Question

当我在 html 中手动输入代码时，highlight.js 完美运行

<!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>

但是当我使用 asciidoctor.js 将标记转换为 html 时，荧光笔在生成的 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>

上面代码后的结果我们可以看到按键插入的代码没有高亮，但是页面加载时手动插入的代码高亮了。

Answer 1

您对 hljs.initHighlightingOnLoad() 的调用发生在 Asciidoc 标记转换为 HTML 之前，因此当 hljs 时 HTML 不在 DOM 中发挥作用。

此外，您似乎希望在 preview() 函数中包含对 hljs 的调用，这样 [=15= 中的每个按键都不会丢失语法高亮显示] 文本区域：

        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 不会突出显示来自 JavaScript 事件的标记加载

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

asciidoctor

highlightjs