highlight.js 的自定义语言定义答案

【问题标题】：Custom Language Definition for highlight.jshighlight.js 的自定义语言定义
【发布时间】：2021-03-10 14:26:14
【问题描述】：

我想在 highlight.js 中定义我自己的语言，但我想知道如何做到这一点。我找到了这个指南

Language definition guide 下面的例子。有人知道我把这个配置放在哪里以便highlight.js 使用这个配置吗？

{
  case_insensitive: true, // language is case-insensitive
  keywords: 'for if while',
  contains: [
    {
      className: 'string',
      begin: '"', end: '"'
    },
    hljs.COMMENT(
      '/\\*', // begin
      '\\*/', // end
      {
        contains: [
          {
            className: 'doc', begin: '@\\w+'
          }
        ]
      }
    )
  ]
}

【问题讨论】：

标签： javascript highlight.js

【解决方案1】：

您可以简单地使用 class 属性在 highlightjs 中指定语言。
例如，如果您要突出显示 python 代码

<pre class="python">
<code>
print "Hello"
</code>
</pre>

编辑：
创建一个名为 highlightcon.min.js 的文件将其与您的 html 文件 <script src="highlightcon.min.js"></script> 链接并将您配置的对象粘贴到 highlightcon.min.js

如果您想定义自己的语言，也可以使用实时语法高亮，您可以使用 ace 编辑器，因为高亮 js 不提供您正在寻找的功能...
在你的index.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" />
    <title>Editor</title>
    <link rel="stylesheet" href="views/style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
  </head>
  <body>
    <!-- Elements -->
    <div id='container'>

        <div id="editor">
        </div>
      
        <iframe id='iframe' frameBorder="0">
        </iframe>
      </div>
      

    <!-- Javascript -->
    <script src="script.js"></script>
  </body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js">是王牌编辑器cdn...
然后在您的script.js 文件中


function update()
{
    var idoc = document.getElementById('iframe').contentWindow.document;

    idoc.open();
    idoc.write(editor.getValue());
    idoc.close();
}

function setupEditor()
{
  window.editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/python");


  editor.getSession().on('change', function() {
    update();
  });

  editor.focus();
  
  
  editor.setOptions({
    fontSize: "16pt",
    showLineNumbers: true,
    showGutter: false,
    vScrollBarAlwaysVisible:true,
    enableBasicAutocompletion: true, enableLiveAutocompletion: true
  });

  editor.setShowPrintMargin(false);
  editor.setBehavioursEnabled(true);
}

setupEditor();
update();
const elementToObserve = document.querySelector("#editor");

在这里，您定义语言 editor.getSession().setMode("ace/mode/python");，您可以在下面的script.js 中找到它。
你可以使用editor.session.setMode("ace/mode/" + language)，只是你需要在编写这个命令之前指定这样的语言
var language = "python"
这也提供了实时语法高亮显示..

【讨论】：

对不起，但这并不能解决问题。我想使用我自己的语言，但我不知道在哪里放置我的语言定义。
嘿@running_tomy，很抱歉知道它没有帮助。我已经编辑了答案，我认为这会有所帮助，也很抱歉 highlightjs 不提供实时语法突出显示。让我知道这是否有帮助.... –