Code Snippets in Bolt CMS

Question

Just wondering if I was able to do code snippets in blog/entry posts with bolt?

I'm currently using Google Code Prettify to do my code snippets but often Bolt will not let me save or post and Entry because I think bolt prevents the user from posting certain code in the blog post. For example in posting some PHP code snippets when I put the "substr" function in Bolt will not let me save the entry.

A lot of the other code I can put it in but certain things it will not let me post.

Is there any way around this?

Thanks in advance!

P.S: Using GitHub 'Gists' works fine but I'd rather not use that method.

score 2 · Answer 1 · answered Sep 04 '14 at 16:29

Bolt allows you to define a field as Markdown in your contenttypes.yml configuration file.

In a Markdown field you can then enter code inside two sets of triple backticks like so:

```php
substr('abcdef', 1, 3);
```

Or wrap it in a pre tag:

<pre class="brush: php">
substr('abcdef', 1, 3);
</pre>

score 0 · Answer 2 · answered Sep 25 '14 at 21:40

I reused the CodeMirror javascript library already present within Bolt.

In my own _footer.twig I added the following lines:

<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>

Next in the javascripts/app.js I added:

$( function() {
  $("textarea.code").each( function( i,el ) {
    CodeMirror.fromTextArea(el, {
      lineNumbers : true
    });    
  });
});

Now when I create content with a piece of code in it I change the view to code and put the code between tags:

<textarea class="code"">
10 Print "Hello"
20 goto 10
</textarea>

You can add the syntax highlighting js files from the codeMirror site and add those to the included script links.

All in all this gave me syntax highlighted code sniplets without pretty printing in advance. I do regret the textarea construct but could replace it with a jQuery part that converts a block to a textarea block. I let the code being editable as a convenience but CodeMirror is very configurable and you could stop that.

NB: I am just starting with Bolt so there might be a better way for this.. Perhaps I should create a Bolt extension to do this.

Code Snippets in Bolt CMS

2 Answers2