如何使用CodeMirror实现特定语言的语法高亮？

没问题，我一步步教你搞定这个需求——你现有的代码已经搭好基础框架了，只需要补充几个关键环节：

1. 引入对应语言的语法模式文件 #

CodeMirror每种语言的语法高亮逻辑都封装在单独的mode文件里，比如要高亮JavaScript就得加javascript.js，高亮Python就加python.js。你需要根据目标语言，把对应的mode脚本添加到页面中。

举个例子，如果要支持JavaScript，在现有script标签后追加：

<script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>

注意：路径要和你的CodeMirror目录结构匹配，比如你的codemirror文件夹放在项目根目录，那路径就是codemirror/mode/[语言名]/[语言名].js

2. （可选但推荐）添加主题样式 #

想让编辑器颜值更高？可以引入CodeMirror自带的主题CSS，比如热门的monokai主题：

<link rel="stylesheet" type="text/css" href="codemirror/theme/monokai.css">

3. 初始化编辑器并指定目标语言 #

最后一步，把普通textarea转换成CodeMirror编辑器，同时明确指定要高亮的语言。因为你已经引入了jQuery，我们可以用它简化DOM操作：

$(document).ready(function() {
  // 将textarea转为CodeMirror实例
  var editor = CodeMirror.fromTextArea(document.querySelector('.codetextarea'), {
    lineNumbers: true, // 开启行号显示
    mode: 'javascript', // 这里指定语言，比如'python'、'htmlmixed'等
    theme: 'monokai' // 如果引入了主题，这里填写主题名称
  });
});

关键注意事项 #

• mode名称要准确：不同语言的mode名称有规范，比如HTML对应的是htmlmixed（支持混合HTML/JS/CSS），Java对应clike，你可以直接查看mode文件夹里的文件名，通常文件名就是mode名称
• 路径务必正确：如果mode或主题文件加载失败，高亮效果就不会生效，建议用浏览器开发者工具的Network面板检查文件是否成功加载

给你一个完整的可运行示例（以JavaScript高亮为例）：

<head>
  <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
  <!-- 引入主题样式 -->
  <link rel="stylesheet" type="text/css" href="codemirror/theme/monokai.css">
</head>
<body>
  <textarea class="codetextarea"></textarea>

  <!-- javascript files-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
  <!-- 引入JavaScript语法模式文件 -->
  <script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>

  <script>
    $(document).ready(function() {
      var editor = CodeMirror.fromTextArea(document.querySelector('.codetextarea'), {
        lineNumbers: true,
        mode: 'javascript',
        theme: 'monokai'
      });
      // 设置测试内容验证高亮效果
      editor.setValue("function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet('CodeMirror'));");
    });
  </script>
</body>

要是你想切换其他语言，只需要替换对应的mode文件和初始化时的mode参数就可以啦！

内容的提问来源于stack exchange，提问作者Ax M