Ajoutez du code et des blocs de code à StreamField dans Wagtail

Notre point de départ est un site Wagtail fonctionnel avec un StreamField. Au bloc de paragraphe de votre StreamField, ajoutez un mot-clé d'entités pour spécifier les entités qu'on veut dans notre bloc de texte, dans ce cas parce qu'on veut la fonctionnalité de code, qui n'est pas là par défaut:

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

Cela ajoutera l'option de code en ligne. Pour faciliter les blocs de code, on installe le package Wagtail Code Block::

pip3 install wagtailcodeblock

Pour créer l'option d'un bloc de code, ajoutez à notre StreamField:

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

et importez CodeBlock:

from wagtailcodeblock.blocks import CodeBlock

Wagtail Code Block propose également une coloration syntaxique. Vous pouvez choisir les thèmes et les langues comme décrit dans la documentation, par exemple:

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'),
)

Si vous souhaitez ajuster le style du code en ligne de Wagtail à celui du bloc de code Wagtail, vous pouvez ajouter le style au fichier CSS, par exemple:

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

Une dernière chose: Wagtail Code Block utilise des numéros de ligne par défaut. Pour les extraits de code plus petits, cela peut être exagéré. Dans la documentation, il ne semble pas y avoir de paramètre pour désactiver cette option. Si vous souhaitez le faire, mettre ce qui suit dans le fichier Javascript de votre projet devrait fonctionner:

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

Migrez la base de données pour incorporer toutes les modifications du modèle et accédez à votre éditeur pour ajouter du code à vos pages.

On laissera la page de l'article tranquille pour l'instant. Si vous souhaitez classer vos articles par thèmes et créer des pages thématiques, lisez plus.

Ajouter du code et des blocs de code à StreamField dans Wagtail