CodeMirror实现代码示例

山重水复疑无路

已于 2024-09-13 16:23:56 修改

阅读量75

点赞数

文章标签： CodeMirror

于 2024-09-13 15:06:12 首次发布

本文链接：https://blog.csdn.net/qq_39933787/article/details/142211522

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/xml/xml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/python/python.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/javascript/javascript.js"></script>
</head>
<body>
  <div id="code-editor"></div>
  <script>
    var editor = CodeMirror(document.getElementById('code-editor'), {
      value: 'import sys\nimport pyarrow.parquet as pq\ndef main():',
      mode: 'text/x-python',//'text/javascript',
      theme: 'default',
      lineNumbers: true, // 显示行号
      matchBrackets: true, // 括号匹配
      indentUnit: 2 // 缩进单位为两个空格
    });
  </script>
</body>
</html>

效果

react

"@uiw/react-codemirror": "^4.23.2"

"@codemirror/lang-python": "^6.1.6"

import { useEffect, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { python } from '@codemirror/lang-python';
import { oneDark } from '@codemirror/theme-one-dark';

const MyCodeEditor = ({ code }) => {
  const [codes, setCodes] = useState(`
# -*- coding: utf-8 -*-

`);
  useEffect(() => {
    setCodes(code);
  }, [code]);
  return (
    <CodeMirror
      value={codes}
      height="300px"
      extensions={[python()]}
      theme={oneDark}
      onChange={(value, viewUpdate) => {
        console.log(value, viewUpdate);
        setCodes(value);
      }}
    />
  );
};

export default MyCodeEditor;