Code en codeblokken toevoegen aan StreamField in Wagtail

Ons uitgangspunt is een werkende Wagtail-site met een StreamField. Voeg aan het alineablok van de StreamField een features-parameter toe om de functies op te geven die we in ons tekstblok willen, in dit geval omdat we de codefunctie willen, die er standaard niet is:

('paragraph', blocks.RichTextBlock(features=['h1', 'h2', 'h3', 'h4', 'h5', 'bold', 'italic', 'ol', 'ul', 'hr', 'link', 'image', 'code', 'blockquote'])),

Dit voegt de optie van inline code toe. Om codeblokken mogelijk te maken, installeren we het pakket Wagtail Code Block:

pip3 install wagtailcodeblock

Om de optie van een codeblok te creëren, voeg toe aan ons StreamField:

('code', CodeBlock(label=_("Code"))),

en importeer CodeBlock:

from wagtailcodeblock.blocks import CodeBlock

Wagtail Code Block heeft ook syntax-accentuering. U kunt de thema's en talen kiezen zoals beschreven in de documentatie, bijvoorbeeld:

WAGTAIL_CODE_BLOCK_THEME = None
WAGTAIL_CODE_BLOCK_LANGUAGES = (
    ('bash', 'Bash/Shell'),
    ('css', 'CSS'),
    ('html', 'HTML'),
    ('javascript', 'Javascript'),
    ('json', 'JSON'),
    ('python', 'Python'),
    ('sql', 'SQL'),
    ('yaml', 'YAML'),
)

Als je de opmaak van inline code van Wagtail wilt aanpassen aan die van Wagtail Code Block, kun je opmaak aan het CSS-bestand toevoegen, bijvoorbeeld:

code {
    background-color: #F3F0EE;
    padding: 2px;
}

Ten slotte: Wagtail Code Block gebruikt standaard regelnummers. Voor kleinere codefragmenten is dit wellicht wat overdreven. In de documentatie lijkt er geen instelling te zijn om dit uit te schakelen. Als je dit zou willen doen, zou het volgende moeten werken in het Javascript-bestand van je project:

$(document).ready(function(){
    $("pre").removeClass("line-numbers");
    $(".line-numbers-rows>span").remove();
});

Migreer de database om alle modelwijzigingen op te nemen en ga naar je editor om wat code aan je pagina's toe te voegen.

We laten het voorlopig hierbij voor wat betreft de artikelpagina. Als je je artikelen in thema's wilt categoriseren en themapagina's wilt maken, lees dan verder.