如何突出显示codeMirror中的语法

How to highlight syntax in codeMirror

本文关键字：语法 codeMirror 何突出 显示      更新时间：2023-09-26

我正在尝试使用codemirror到我的网站，这是一个用JavaScript为浏览器实现的通用文本编辑器。但是语法高亮显示不起作用。codeMirror文档对我帮助不大。这是我的密码。

<html>
<head>
<meta charset="utf-8">
<title>Code Mirror</title>
<link rel="stylesheet" type="text/css" href="codemirror.css">
<script type="text/javascript" src="codemirror.js"></script>
</head>
<body>
    <textarea id='demotext'>
    function foo() {
        for(i = 0, i < 10, i++)
        console.log(i);
    }
    </textarea>
<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
          lineNumbers: true,
          mode: "javascript"
    });
</script>
</body>
</html>

我在textarea中的代码语法没有突出显示。CodeMirror语法高亮显示在此不起作用。

您需要为要突出显示的语言加载模式。在这种情况下，请从分发中加载mode/javascript/javascript.js。

我只想一步一步地为答案编写完整的脚本，这样新手就可以在想要测试完整代码时遵循如何实现代码镜像。

1.下载CodeMirror 5

请确保从网站下载代码镜像库，而不是从GitHub版本下载。

2.CodeMirror作为供应商

在我写这篇文章的时候，CodeMirror的版本是5.65.14提取并重命名没有版本号的文件夹。

3.HTML文件

编写与codemirror文件夹并行的HTML文件。不要在codemirror文件夹中创建HTML文件。我想在这个代码中显示，我们想使用CodeMirror作为我们网站的语法高亮显示，而不是作为代码编辑器，所以复制下面的代码：

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0" />
        <title>Syntax Highlighting With CodeMirror 5</title>
        
        <link href="codemirror/lib/codemirror.css" rel="stylesheet" />
        <!-- CodeMirror Theme -->
        <link rel="stylesheet" href="codemirror/theme/yonce.css" />
        
        <script src="codemirror/lib/codemirror.js"></script>
        <!-- add an add-on -->
        <script src="codemirror/addon/edit/matchbrackets.js"></script>
        <script src="codemirror/addon/selection/active-line.js"></script>
        <!-- add mode of language that we want to syntax highlighting the code -->
        <script src="codemirror/mode/javascript/javascript.js"></script>
        
    </head>
<body>
    <textarea id='kloningspoon-code'>
    function foo() {
        for(i = 0, i < 10, i++)
        console.log(i);
    }
    </textarea>
<script>
            CodeMirror.fromTextArea( document.getElementById("kloningspoon-code"), {
              readOnly: true,
              mode: "javascript",
              theme: "yonce",
              lineNumbers: true,
              matchBrackets: true,
              lineWrapping: true,
              cursorHeight: 0,
              styleActiveLine: true,
            });
</script>
</body>
</html>

解释

  • 只读：true，=>我们希望使文本区域不可编辑
  • 模式："；javascript"=>我们要语法突出显示的代码
  • 主题："；yonce"=>语法主题突出显示
  • lineNumbers:true，=>显示行号
  • matchBrackets:true，=>所以我们知道代码的打开和关闭位置
  • 换行：true，=>在移动浏览器上使文本区域响应
  • cursorHeight:0，=>隐藏光标
  • styleActiveLine:true，=>显示光标激活的行的位置

我希望这能有所帮助。

相关文章：