2

I'm deciding on the best way to have code blocks in my content. I'm doing something similar to Craft Docs. Do you have any best practices?

Currently I'm thinking about having a matrix field for the whole entry content - and then just add a Title block, a Rich text block and a Regular text with line breaks for code. I'd then use Prism.js in the frontend to format the code.

I guess I could use another field to identify language for syntax highlighting for each Regular text block. Has anyone seen a special field type dedicated for syntax highlighting? I'd love to have syntax highlighting already in the admin and also a better way to choose language type.

Thanks for any insights!

6

There is the Ace Freely plugin, which adds an Ace Editor Field Type that would work well in a Matrix field.

  • Well that is exactly what I was looking for. Thanks, Mike! – Jure Srpcic Mar 23 '15 at 9:27
4

On Straight up Craft we use a Doxter Block for Markdown and Rainbow.js with a custom Craft-Twig extension for syntax highlighting.

Doxter allows you to identify the code block like so:

``` twig
{{ siteUrl }}
```

or

``` php
<?php echo "hello world"; ?>
```

And you can view the syntax in highlighting in the CP before you publish using Live Preview.

  • But you don't have syntax highlighting in the CP, do you? I think that's what the OP is after. – carlcs Mar 20 '15 at 16:25
  • We just use Live Preview. I can see where the OP might mean what you're describing. In any case, this is one workflow to consider. – Ben Parizek Mar 20 '15 at 20:15
  • Thanks, Ben - this is already a great solution. Ideally it would be nice to have syntax highlighting in the field, but live preview definitely helps. What I'd like most is the ability to use the TAB key - and maybe even to select a few lines and tab them together. If anyone gets that working, it would be great. I'll look into turning that into a custom-field/block plugin at some point. – Jure Srpcic Mar 21 '15 at 18:47
  • 1
    @enorog I think indenting with the tab key should be possible with Doxter plugin, as it implements behave.js for text fields. – carlcs Mar 22 '15 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.