-
Notifications
You must be signed in to change notification settings - Fork 85
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
请问是否可以针对不同代码语言做行号和折叠? #617
Labels
enhancement
New feature or request
Comments
记录:typora 使用 codeMirror 作为代码块,似乎每个语言的折叠都需要引入一个 js 文件。 demo <!doctype html>
<head>
<title>CodeMirror: Code Folding Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="https://codemirror.net/5/doc/docs.css">
<style>
.some-css {
color: red;
line-height: 2;
}
</style>
<link rel="stylesheet" href="https://codemirror.net/5/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/5/addon/fold/foldgutter.css" />
<script src="https://codemirror.net/5/lib/codemirror.js"></script>
<script src="https://codemirror.net/5/addon/fold/foldcode.js"></script>
<script src="https://codemirror.net/5/addon/fold/foldgutter.js"></script>
<script src="https://codemirror.net/5/addon/fold/brace-fold.js"></script>
<script src="https://codemirror.net/5/addon/fold/xml-fold.js"></script>
<script src="https://codemirror.net/5/addon/fold/indent-fold.js"></script>
<script src="https://codemirror.net/5/addon/fold/markdown-fold.js"></script>
<script src="https://codemirror.net/5/addon/fold/comment-fold.js"></script>
<script src="https://codemirror.net/5/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/5/mode/xml/xml.js"></script>
<script src="https://codemirror.net/5/mode/css/css.js"></script>
<script src="https://codemirror.net/5/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/5/mode/python/python.js"></script>
<script src="https://codemirror.net/5/mode/markdown/markdown.js"></script>
<style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
</head>
<body>
<div id=nav>
<a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="https://codemirror.net/5/doc/logo.png"></a>
<ul>
<li><a href="https://codemirror.net/5/index.html">Home</a>
<li><a href="https://codemirror.net/5/doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror5">Code</a>
</ul>
<ul>
<li><a class=active href="#">Code Folding</a>
</ul>
</div>
<article>
<h2>Code Folding Demo</h2>
<form>
<div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
<textarea id="code" name="code"></textarea></div>
<div style="max-width: 50em; margin-bottom: 1em">HTML:<br>
<textarea id="code-html" name="code-html"></textarea></div>
<div style="max-width: 50em; margin-bottom: 1em">JSON with custom widget:<br>
<textarea id="code-json" name="code-json">
{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}
}
</textarea></div>
<div style="max-width: 50em">Python:<br>
<textarea id="code-python" name="code">
def foo():
do_some_stuff()
here
return None
class Bar:
__init__(self):
if True:
print("True")
else:
print("False")
this_code_makes_no_sense():
pass
# A comment</textarea></div>
<div style="max-width: 50em">Markdown:<br>
<textarea id="code-markdown" name="code"></textarea></div>
</form>
<script id="script">
/*
* Demonstration of code folding
*/
window.onload = function() {
var te = document.getElementById("code");
var sc = document.getElementById("script");
te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
sc.innerHTML = "";
var te_html = document.getElementById("code-html");
te_html.value = document.documentElement.innerHTML;
var te_python = document.getElementById("code-python");
var te_markdown = document.getElementById("code-markdown");
te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
var te_json = document.getElementById("code-json");
window.editor = CodeMirror.fromTextArea(te, {
mode: "javascript",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
editor.foldCode(CodeMirror.Pos(13, 0));
window.editor_json = CodeMirror.fromTextArea(te_json, {
mode: {name: "javascript", json: true},
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
foldOptions: {
widget: (from, to) => {
var count = undefined;
// Get open / close token
var startToken = '{', endToken = '}';
var prevLine = window.editor_json.getLine(from.line);
if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
startToken = '[', endToken = ']';
}
// Get json content
var internal = window.editor_json.getRange(from, to);
var toParse = startToken + internal + endToken;
// Get key count
try {
var parsed = JSON.parse(toParse);
count = Object.keys(parsed).length;
} catch(e) { }
return count ? `\u21A4${count}\u21A6` : '\u2194';
}
}
});
editor_json.foldCode(CodeMirror.Pos(5, 0));
window.editor_html = CodeMirror.fromTextArea(te_html, {
mode: "text/html",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
editor_html.foldCode(CodeMirror.Pos(0, 0));
editor_html.foldCode(CodeMirror.Pos(34, 0));
window.editor_python = CodeMirror.fromTextArea(te_python, {
mode: "python",
lineNumbers: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
mode: "markdown",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
};
</script>
</article>
</body> |
你好,感谢反馈。需求已实现。麻烦升级到新版本试用。 注意,此功能默认关闭,需要手动开启:修改 settings.user.toml 文件,新增如下内容: [fence_enhance]
# 针对不同代码语言做行号和折叠
ENABLE_LANGUAGE_FOLD = true |
需求已实现,此 issue 关闭,如有问题,麻烦在下面留言或者另开 issue。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
比如xml和json非常需要可以折叠起来,方便看
The text was updated successfully, but these errors were encountered: