我重用了 Bolt 中已经存在的 CodeMirror javascript 库。
在我自己的 _footer.twig 中,我添加了以下几行:
<link rel="stylesheet" href="{{ paths.app }}view/lib/ckeditor/plugins/codemirror/css/codemirror.min.css">
<script src="{{ paths.app }}view/lib/ckeditor/plugins/codemirror/js/codemirror.min.js"></script>
接下来在我添加的 javascripts/app.js 中:
$( function() {
$("textarea.code").each( function( i,el ) {
CodeMirror.fromTextArea(el, {
lineNumbers : true
});
});
});
现在,当我创建包含一段代码的内容时,我将视图更改为代码并将代码放在标签之间:
<textarea class="code"">
10 Print "Hello"
20 goto 10
</textarea>
您可以从 codeMirror 站点添加语法高亮 js 文件并将它们添加到包含的脚本链接中。
总而言之,这给了我语法突出显示的代码片段,而无需提前打印。我确实对 textarea 构造感到遗憾,但可以将其替换为将块转换为 textarea 块的 jQuery 部分。我让代码可编辑是为了方便,但 CodeMirror 是非常可配置的,你可以停止它。
注意:我刚开始使用 Bolt,所以可能有更好的方法。也许我应该创建一个 Bolt 扩展来做到这一点。