codeMirror编写属于自己的编辑器

最新推荐文章于 2024-08-18 10:29:57 发布

JovanDong

最新推荐文章于 2024-08-18 10:29:57 发布

阅读量1k

点赞数 1

分类专栏： javascript.js 文章标签： codeMirror编写属于自己的编译器 codeMirror

本文链接：https://blog.csdn.net/Mr_dong_ya_yun/article/details/88062273

版权

javascript.js 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，

codeMirror调用非常方便

首先在页面中载入插件CSS及JS文件

<link href="/static/codemirror/lib/codemirror.css" rel="stylesheet" >

<script src="/static/codemirror/lib/codemirror.js"></script>

同时加载你所需要使用的脚本JS及风格样式CSS文件，如下举例：

<!--begin code mirror -->

<!--下面两个是使用Code Mirror必须引入的-->

<link rel="stylesheet" href="lib/codemirror.css"/>

<script src="lib/codemirror.js"></script>

<!--Java代码高亮必须引入-->

<script src="clike.js"></script>

<!--groovy代码高亮-->

<script src="mode/groovy/groovy.js"></script>

<script src="mode/python/python.js"></script>

<script src="mode/javascript/javascript.js"></script>

<!--引入css文件，用以支持主题-->

<!-- <link rel="stylesheet" href="theme/dracula.css"/> -->

<link rel="stylesheet" href="theme/blackboard.css"/>



<!--支持代码折叠-->

<link rel="stylesheet" href="addon/fold/foldgutter.css"/>

<script src="addon/fold/foldcode.js"></script>

<script src="addon/fold/foldgutter.js"></script>

<script src="addon/fold/brace-fold.js"></script>

<script src="addon/fold/comment-fold.js"></script>

<!--括号匹配-->

<script src="addon/edit/matchbrackets.js"></script>

html代码

<!DOCTYPE html>

<html lang="en">

<!--begin code mirror -->

<!--下面两个是使用Code Mirror必须引入的-->

<link rel="stylesheet" href="lib/codemirror.css"/>

<script src="lib/codemirror.js"></script>

<!--Java代码高亮必须引入-->

<script src="clike.js"></script>

<!--groovy代码高亮-->

<script src="mode/groovy/groovy.js"></script>

<script src="mode/python/python.js"></script>

<script src="mode/javascript/javascript.js"></script>

<!--引入css文件，用以支持主题-->

<!-- <link rel="stylesheet" href="theme/dracula.css"/> -->

<link rel="stylesheet" href="theme/blackboard.css"/>



<!--支持代码折叠-->

<link rel="stylesheet" href="addon/fold/foldgutter.css"/>

<script src="addon/fold/foldcode.js"></script>

<script src="addon/fold/foldgutter.js"></script>

<script src="addon/fold/brace-fold.js"></script>

<script src="addon/fold/comment-fold.js"></script>

<!--括号匹配-->

<script src="addon/edit/matchbrackets.js"></script>



<!--end Code Mirror -->



<head>

<meta charset="utf-8"/>

<title>代码框</title>

</head>

<h1>代码在线编辑编译demo</h1>

<body>

<!-- begin code -->

<textarea class="form-control" id="code" name="code"></textarea>

<!-- end code-->

</div>



<script>

//根据DOM元素的id构造出一个编辑器

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

mode: "text/groovy", //实现groovy代码高亮

mode: "text/x-java", //实现Java代码高亮

mode: "text/python",

mode: "text/javascript",//实现python代码高亮

lineNumbers: true,  //显示行号

theme: "blackboard",  //设置主题

lineWrapping: true, //代码折叠

foldGutter: true,

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

matchBrackets: true,  //括号匹配

//readOnly: true, //只读

});

editor.setSize('800px', '500px'); //设置代码框的长宽

editor.setValue(""); //先代码框的值清空

var scriptCode = `#!/usr/bin/python

# -*- coding: UTF-8 -*-

for i in range(1,5):

for j in range(1,5):

for k in range(1,5):

if( i != k ) and (i != j) and (j != k):

print i,j,k`

editor.setValue(scriptCode); //给代码框赋值

// editor.setOption("readOnly", true);

</script>

</body>

</html>

运行结果：