Code blocks for Wagtail using Pygments
This is a very simple and quick approach I've used in several website where I needed to have chunks of code as a StreamField blocks. You only need the Pygments package and a few lines of code.
First thing you need to do is to install Pygments:
$ pip install pygments
Then define the appropriate block class that you include in your StreamField definition:
from django.utils.safestring import mark_safe from pygments import highlight from pygments.formatters import get_formatter_by_name from pygments.lexers import get_lexer_by_name from wagtail.wagtailcore import blocks class CodeBlock(blocks.StructBlock): """ Code Highlighting Block """ LANGUAGE_CHOICES = ( ('python', 'Python'), ('bash', 'Bash/Shell'), ('html', 'HTML'), ('css', 'CSS'), ('scss', 'SCSS'), ('json', 'JSON'), ) STYLE_CHOICES = ( ('syntax', 'default'), ('emacs', 'emacs'), ('monokai', 'monokai'), ('vim', 'vim'), ('xcode', 'xcode'), ) language = blocks.ChoiceBlock(choices=LANGUAGE_CHOICES) style = blocks.ChoiceBlock(choices=STYLE_CHOICES, default='syntax') code = blocks.TextBlock() def render(self, value): src = value['code'].strip('\n') lang = value['language'] lexer = get_lexer_by_name(lang) css_classes = ['code', value['style']] formatter = get_formatter_by_name( 'html', linenos=None, cssclass=' '.join(css_classes), noclasses=False, ) return mark_safe(highlight(src, lexer, formatter)) class Meta: icon = 'code'
Make sure you add your own css classes in the body of the render method. You could change this method to fulfill any special requirements you might have.
You could implement your own CSS or borrow some ready-to-use files from https://github.com/dwayne/sass-pygments
If the previous snippet is not enough feel free to have a look at this blog's source code https://github.com/jordij/jordijoan.me or drop me a line.
Enjoy!