来自Codemirror文本区域的codemirror显示代码
在显示codemirror文本区域的代码时，我得到了纯文本，我希望以代码突出显示的格式显示。请帮帮我。
我想打印在代码错误编辑器中突出显示的代码，我使用editor.getValue();从代码错误编辑器中获取该代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo_Format</title>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="lib/util/formatting.js"></script>
<script src="lib/css.js"></script>
<script src="lib/xml.js"></script>
<script src="lib/javascript.js"></script>
<script src="lib/htmlmixed.js"></script>
<link rel="stylesheet" href="lib/docs.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
}
td {
padding-right: 20px;
}
</style>
</head>
<body>
<h1></h1>
<form>
<textarea id="code" name="code">
package org;import java.io.IOException;import javax.servlet.http.*;@SuppressWarnings("serial")
public class BasicChatServlet extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse resp)
throws IOException{resp.setContentType("text/plain");resp.getWriter().println("Hello, world");}}
</textarea>
</form>
<table>
<tr>
<td>
<a href="javascript:autoFormatSelection()">
<button> Format </button>
</a>
<button id="copy_button">copy</button>
<button id="show">show</button>
</td>
<div id="code_show">
</div>
</tr>
</table>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#copy_button").click(function(){
$("textarea").select();
document.execCommand('copy');
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4
});
CodeMirror.commands["selectAll"](editor);
function getSelectedRange() {
return { from: editor.getCursor(true), to: editor.getCursor(false) };
}
function autoFormatSelection() {
var range = getSelectedRange();
var x=editor.autoFormatRange(range.from, range.to);
}
$("#show").click(function(){
var program=editor.getValue();
$("#code_show").text(program);
});
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-01-26 15:18:11
(不确定这是否回答了您的问题，因为它不是很清楚--如果您只为问题提供了必要的代码，这将是有帮助的)
每种模式(设置CodeMirror实例的样式)都位于mode/目录的一个子目录中，并且通常定义实现该模式的单个JavaScript文件。加载这样的文件将使CodeMirror可以通过mode option使用该语言，CodeMirror是在创建CodeMirror实例时声明的：
CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4,
mode: 'text/css'
});您需要确保将different mode files添加到库中的模式文件夹中。在本例中，css.js、xml.js、javascript.js和htmlmixed.js文件需要位于名为lib/mode的新文件夹中(例如，css.js的文件路径为lib/mode/css.js )。
您可以查看每种模式的演示，了解必须将哪些字符串传递给mode:选项才能调用它。这是css demo for example
您可以更进一步，动态更改编辑多种文本文件类型的模式：Multiple modes Codemirror
https://stackoverflow.com/questions/42410738
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号