javascript 如何在codeMirror中突出显示语法

ukdjmx9f 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(116)

我正试图使用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 syntax highlighting is not working here.的

JavaScript

来源：https://stackoverflow.com/questions/33487166/how-to-highlight-syntax-in-codemirror

2条答案

按热度按时间

jgovgodb1#

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

赞(0）回复(0）举报 2023-08-02

31moq8wy2#

我只是想写完整的脚本，一步一步的答案，以便新手可以沿着当想要测试完整的代码如何实现codemirror。

1.下载CodeMirror 5

请确保download codemirror库来自网站而不是来自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>

字符串

说明

readOnly：true， =>我们希望使文本区域不可编辑
mode：“JavaScript”， =>我们要语法高亮的代码
theme：“yonce”， =>语法主题高亮
lineNumbers：true， =>显示行号
matchBrackets：true， =>所以我们知道代码的开始和结束位置
- line Package ：true，* =>使文本区域在移动的浏览器上响应
cursorHeight：0， =>隐藏光标
styleActiveLine：true， => show where line activated by cursor

我希望这能帮上忙。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 如何在codeMirror中突出显示语法

2条答案

1.下载CodeMirror 5

2. CodeMirror作为供应商

3. HTML文件

相关问题

热门标签

最新问答