首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >highlight.js的自定义语言定义

highlight.js的自定义语言定义
EN

Stack Overflow用户
提问于 2021-03-09 17:17:01
回答 1查看 215关注 0票数 0

我想用highlight.js定义我自己的语言,但我想知道如何做到这一点。我找到了这本指南

使用下面的示例进行Language definition guide。有人知道我应该把这个配置放在哪里,这样highlight.js才能使用这个配置吗?

代码语言:javascript
复制
{
  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+'
          }
        ]
      }
    )
  ]
}
EN

回答 1

Stack Overflow用户

发布于 2021-03-09 17:37:42

您可以简单地使用class属性在highlightjs中指定语言。

例如,如果要突出显示python代码

代码语言:javascript
复制
<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使用中

代码语言:javascript
复制
<!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文件中

代码语言:javascript
复制
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");

在这里,您可以在下面的script.js中定义语言editor.getSession().setMode("ace/mode/python");

您可以使用editor.session.setMode("ace/mode/" + language),只需在编写此命令之前指定如下语言即可

var language = "python"

这也提供了实时的语法突出显示。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66544020

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档