codemirror内部模式自动缩进问题
codemirror inner mode auto indentation problems
我在让 codemirror 将正确的自动缩进应用到混合模式中的内部模式时遇到了一些问题。
您可以在此处查看该模式的实时版本(以及它如何不工作):
https://extremely-alpha.iodide.io/notebooks/216/ 但简而言之,我们的想法是能够使用 matlab 样式的块定界符在语言之间切换,如下所示:
%% js
[1,2,3].forEach(i => {
console.log(i)
})
%% py
for i in range(5):
for j in range(10):
print i+j
%% css
div#foo {
border: 1px solid pink
}
正如您从我的示例中看到的那样 link,语法突出显示工作正常,但您还会注意到缩进没有按预期工作。
此代码镜像模式的代码是here on github. It is very much based on codemirror's html mixed mode。
我尝试将 copyState 添加到我的代码中,再次遵循 html 混合模式 --
copyState: state => {
let local;
if (state.localState) {
console.log("state.localState copied");
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {
token: state.token,
localMode: state.localMode,
localState: local
};
},
-- 但这会导致另一种奇怪的缩进行为,并且最终无法正常工作。
我已经为此苦苦思索了很长一段时间,但我无法通过 google、api 文档和论坛将其拼凑起来,所以任何帮助都会不胜感激!谢谢!
以防将来有人遇到这个问题:事实证明,codemirror 模式通常不会内置合理的默认值,或者至少在您使用 CodeMirror.getMode(...)
时默认情况下不会加载它们。就我而言,我必须从
const innerModes = {
js: CodeMirror.getMode({}, { name: "javascript" }),
py: CodeMirror.getMode({}, { name: "python" }),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({}, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
至:
const innerModes = {
js: CodeMirror.getMode(
{ indentUnit: 2, statementIndent: 2 },
{ name: "javascript" }
),
py: CodeMirror.getMode(
{ indentUnit: 4, hangingIndent: 4 },
{ name: "python" }
),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({ indentUnit: 2 }, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
这阻止了 NaN
s 从子模式的缩进函数中传递出去。
我在让 codemirror 将正确的自动缩进应用到混合模式中的内部模式时遇到了一些问题。
您可以在此处查看该模式的实时版本(以及它如何不工作): https://extremely-alpha.iodide.io/notebooks/216/ 但简而言之,我们的想法是能够使用 matlab 样式的块定界符在语言之间切换,如下所示:
%% js
[1,2,3].forEach(i => {
console.log(i)
})
%% py
for i in range(5):
for j in range(10):
print i+j
%% css
div#foo {
border: 1px solid pink
}
正如您从我的示例中看到的那样 link,语法突出显示工作正常,但您还会注意到缩进没有按预期工作。
此代码镜像模式的代码是here on github. It is very much based on codemirror's html mixed mode。
我尝试将 copyState 添加到我的代码中,再次遵循 html 混合模式 --
copyState: state => {
let local;
if (state.localState) {
console.log("state.localState copied");
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {
token: state.token,
localMode: state.localMode,
localState: local
};
},
-- 但这会导致另一种奇怪的缩进行为,并且最终无法正常工作。
我已经为此苦苦思索了很长一段时间,但我无法通过 google、api 文档和论坛将其拼凑起来,所以任何帮助都会不胜感激!谢谢!
以防将来有人遇到这个问题:事实证明,codemirror 模式通常不会内置合理的默认值,或者至少在您使用 CodeMirror.getMode(...)
时默认情况下不会加载它们。就我而言,我必须从
const innerModes = {
js: CodeMirror.getMode({}, { name: "javascript" }),
py: CodeMirror.getMode({}, { name: "python" }),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({}, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
至:
const innerModes = {
js: CodeMirror.getMode(
{ indentUnit: 2, statementIndent: 2 },
{ name: "javascript" }
),
py: CodeMirror.getMode(
{ indentUnit: 4, hangingIndent: 4 },
{ name: "python" }
),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({ indentUnit: 2 }, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
这阻止了 NaN
s 从子模式的缩进函数中传递出去。