Drupal 8 Code Snippet Editor installieren

Veröffentlicht am: Di., 13/02/2018 - 19:59 Von: Markus

Bei CodeSnippet handelt es sich um eine Erweiterung für den ckeditor die ihnen ermöglicht in ihren Texten Programmcode besser darzustellen. Der Code wird dann dargestellt wie in einem Editor.

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes }}>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

Diese Erweiterung muss in Drupal erst installiert werden. Dazu laden sie das Plug-In von https://download.ckeditor.com/codesnippet/releases/codesnippet_4.5.11.zip herunter und entpacken es im Ordner ihrDrupal/libraries

Den Ordner müssen sie gegebenenfalls erst erstellen.

Anschließend installieren sie das Modul https://www.drupal.org/project/codesnippet und aktivieren es in Drupal.

 

Um den Button im Editor sichtbar zu machen aktivieren sie ihn in dem sie unter „Text formats and editorsDrupal/admin/config/content/formats das Button Symbol runterziehen in ihre Editor Leiste.

 

 

Außerdem können sie anschließend noch das Design auswählen in dem der Code erscheinen soll.

Es lassen sich viele Designs auswählen.

 

Ein Demo gibt es unter https://highlightjs.org/static/demo/

Außerdem gibt es unter https://highlightjs.org/download/ weitere Programmiersprachen zur Erweiterung.

Zur Installation muss nur die highlight.pack.js Datei ersetzt werden im Ordner unter: /libraries/codesnippet/lib/highlight/highlight.pack.js

Es sollte außerdem noch der Drupal Cache geleert werden.

Neuen Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Eingeschränktes HTML

  • Erlaubte HTML-Tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Zeilenumbrüche und Absätze werden automatisch erzeugt.
  • Website- und E-Mail-Adressen werden automatisch in Links umgewandelt.
CAPTCHA
Geben Sie die Zeichen ein, die im Bild gezeigt werden.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.