Skip to content
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

Closed
lllanaaa opened this issue Jun 7, 2024 · 3 comments
Closed

请问是否可以针对不同代码语言做行号和折叠? #617

lllanaaa opened this issue Jun 7, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@lllanaaa
Copy link

lllanaaa commented Jun 7, 2024

比如xml和json非常需要可以折叠起来,方便看

@obgnail
Copy link
Owner

obgnail commented Jun 13, 2024

记录: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>

@obgnail obgnail added the enhancement New feature or request label Jun 13, 2024
@obgnail
Copy link
Owner

obgnail commented Sep 25, 2024

@lllanaaa

你好,感谢反馈。需求已实现。麻烦升级到新版本试用。

IMG_2024-09-25_18-13-45 (1)

注意,此功能默认关闭,需要手动开启:修改 settings.user.toml 文件,新增如下内容:

[fence_enhance]
# 针对不同代码语言做行号和折叠
ENABLE_LANGUAGE_FOLD = true

@obgnail
Copy link
Owner

obgnail commented Sep 25, 2024

需求已实现,此 issue 关闭,如有问题,麻烦在下面留言或者另开 issue。

@obgnail obgnail closed this as completed Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants