Monaco Editor 示例

文章发布时间:

最后更新时间:

文章总字数:
345

预计阅读时间:
1 分钟

页面浏览: 加载中...

Monaco Editor

除了 Hexo 自带的 代码块 外，本主题还支持 VS Code 风格的 Monaco Editor。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% editor javascript %}
/* global hexo */

'use strict';

function render(data) {
    return hexo.render.renderSync({ text: data, engine: 'markdown' });
}

hexo.extend.tag.register('hide', (args) => {
    let content = ''
    args.forEach((item) => {
        content += ' ' + item
    });
    return `<span class="hide"><object>${render(content.slice(1)).trim()}</object></span>`;
})
{% endeditor %}

editor 标签支持以下参数：

1
[language, [theme, [readOnly, [height]]], [...extras(key:value)]]
  • language 默认为 plaintext；
  • theme 默认为 vs-dark；
  • readOnly 默认为 true；
  • height 默认为 300px。

较少使用的参数可通过 extras 项传入。例如，下面示例在超过 40 列时启用折行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% editor javascript hc-black wordWrap:`wordWrapColumn` wordWrapColumn:40 wrappingIndent:`indent` %}
/* global hexo */

'use strict';

function render(data) {
    return hexo.render.renderSync({ text: data, engine: 'markdown' });
}

hexo.extend.tag.register('hide', (args) => {
    let content = ''
    args.forEach((item) => {
        content += ' ' + item
    });
    return `<span class="hide"><object>${render(content.slice(1)).trim()}</object></span>`;
})
{% endeditor %}

更多扩展参数请参阅 Monaco Editor 文档；具体样式效果见 PR #215。

打赏
支付宝 | Alipay
微信 | Wechat