我重用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>
接下來的的JavaScript/app.js我說:
$(function() {
$("textarea.code").each(function(i,el) {
CodeMirror.fromTextArea(el, {
lineNumbers : true
});
});
});
現在,當我創建了一塊內容代碼在其中我將視圖更改爲代碼並將代碼放在標記之間:
<textarea class="code"">
10 Print "Hello"
20 goto 10
</textarea>
您可以添加語法highlighti ng代碼鏡像站點中的js文件並將其添加到包含的腳本鏈接中。
總之,這給了我語法高亮的代碼sniplets沒有提前漂亮的打印。我對textarea構造感到後悔,但可以用一個將塊轉換爲textarea塊的jQuery部件替換它。我讓代碼作爲一種方便的方式進行編輯,但CodeMirror是非常可配置的,你可以阻止它。
注意:我剛開始使用螺栓,因此可能有更好的方法。也許我應該創建一個螺栓擴展來做到這一點。