时间戳

首页 > 解决方案 > highlight.js 不会突出显示来自 JavaScript 事件的标记加载

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

问题描述

当我在 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>

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

标签： asciidoctorhighlightjs

解决方案

您的调用是在 Asciidoc 标记转换为 HTML 之前进行的，因此 HTML 在其工作hljs.initHighlightingOnLoad()时不在 DOM中。hljs

此外，您似乎希望hljs在函数中包含对的调用，以便在textareapreview()中的每个按键上都不会丢失语法突出显示：raw_code

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

推荐阅读