Code Syntax Block

Beschreibung

Code Syntax Block erweitert den WordPress-Block-Editor um die Unterstützung von Syntax-Highlighting mit dem Prism-Syntax-Highlighter für den Kern-Codeblock.

Der Prism-Syntax-Highlighter führt JavaScript aus, das im Frontend geladen wird, um Codeblöcke zu analysieren und Syntax-Markup anzuwenden. Eine CSS-Datei legt die Farbe und den Stil fest, der auf das Syntax-Markup angewendet werden soll. Siehe Prism Syntax Highlighter für alle Details.

Primäre Entwicklung und Probleme werden auf Github verfolgt unter: https://github.com/mkaz/code-syntax-block

Screenshots

  • Beispiel der Syntaxhervorhebung
  • Beispiel im Editor

Installation

Nachdem du das Plugin installiert und aktiviert hast, kannst du es im Block Editor verwenden, indem du einen Standard Code Block erstellst und ein Sprachformat auswählst.

Wenn du einen neuen Code-Block erstellst, wähle den Code-Block aus und wähle dann im Inspektor (Block-Eigenschaften auf der rechten Seite) die Sprache für den Code. Der Code wird sich im Editor nicht ändern, aber du wirst ein kleines Label mit der ausgewählten Sprache sehen.

Im Frontend wird der Code farblich hervorgehoben, wenn der Beitrag angezeigt wird.

FAQ

Welche Sprachen werden unterstützt?

Das Code Syntax Block Plugin verwendet das Prism Autoloader Plugin, um alle Sprachen zu unterstützen, die Prism unterstützt. Schaue dir die Liste der unterstützten Sprachen an.

Wie kann ich das Farbschema anpassen?

Das Standard-Farbschema ist A11y Dark, optimiert für Barrierefreiheit. Wenn du das Farbschema ändern möchtest, kannst du im Editor aus ein paar verschiedenen Farbschemas auswählen, die mit dem Plugin ausgeliefert werden. Du kannst auch ein Farbschema aus dem Prism Themes Repository verwenden oder dein eigenes erstellen.

Das Farbschema ist eine einzelne CSS-Datei. Es gibt ein paar Möglichkeiten zur Anpassung:

  1. Das Plugin sucht im aktuellen Theme nach der Datei: assets/prism/prism.css und verwendet diese Datei, wenn sie existiert. Füge deine benutzerdefinierte Datei an diesem Ort hinzu, und sie wird verwendet.

  2. Wenn du diesen Dateispeicherort nicht magst, kannst du den Filter mkaz_prism_css_path verwenden und einen Pfad relativ zu deinem Theme angeben.

  3. Wenn du lieber eine vollständige URL angeben möchtest, kannst du den Filter mkaz_prism_css_url verwenden und eine vollständige URL des zu verwendenden Stylesheets angeben.

Ein Beispiel für das Hinzufügen eines Filters, um die URL zu ändern, füge den folgenden Code in die functions.php deines Themes ein

add_filter( 'mkaz_prism_css_url', function() {
    return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-hopscotch.css';

});

Hinweis: Wenn du die Titel/Dateinamen-Funktion verwendest und das CSS anpasst, musst du deinen eigenen Stil anwenden, der auf die Klasse prism-titlename abzielt.

Wie kann ich die Sprachenliste anpassen?

Benutze den Filter mkaz_code_syntax_language_list, um die Liste der Sprachen, die im Editor angezeigt werden, anzupassen. Standardmäßig zeigt der Code-Syntax-Block eine kürzere Liste beliebter Sprachen, aber Prism unterstützt fast 200 Sprachen, Sprachenliste ansehen.

Verwende diesen Filter, um die Unterstützung der Sprachen zu erweitern, die du brauchst. Zusätzlich kannst du den Filter nutzen, um die Liste auf die von dir genutzten Sprachen zu verkürzen und so die Auswahl zu erleichtern.

Hier ist ein Beispiel, das die Liste auf ein kleineres Set verkürzt:

add_filter( 'mkaz_code_syntax_language_list', function() {
    return array(
        "bash" => "Bash",
        "go" => "Go",
        "html" => "HTML",
        "javascript" => "JavaScript",
        "json" => "JSON",
        "markdown" => "Markdown",
        "php" => "PHP",
        "python" => "Python",
        "jsx" => "React JSX",
        "sass" => "Sass",
        "sql" => "SQL",
        "svg" => "SVG",
        "toml" => "TOML",
        "vim" => "vim",
        "xml" => "XML",
        "yaml" => "YAML",
    );
} );

Kann ich eine Standardsprache einstellen, damit ich die Sprache nicht jedes Mal neu auswählen muss?

Ja, benutze den Filter mkaz_code_syntax_default_lang, um eine Standardsprache zu setzen, wenn du einen Codeblock einfügst. Du kannst sie immer noch ändern, wenn du Code anzeigen möchtest, der nicht die Standardsprache verwendet.

Dieses Beispiel würde JavaScript als Standard einstellen:

add_filter( 'mkaz_code_syntax_default_lang', function() { return 'javascript'; });

Kann ich das bedingte Laden außer Kraft setzen, so dass Assets immer geladen werden?

Ja, benutze den Filter mkaz_code_syntax_force_loading, um zu erzwingen, dass Assets immer geladen werden, ansonsten benutzt der Block has_block, um zu prüfen, ob die Assets geladen wurden.

Beispiel:

add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );

Rezensionen

4. August 2021
makes a good impression on me, has replaced the "Crayon Syntax Highlighter" on my tech blog, unfortunately no developer has been found for this excellent syntax highlighter to develop it further.
31. Juli 2021
Literally searched for the plugin, installed, activated, and refreshed my post edit page - instantly working! Fantastic plugin, great selection of languages/themes to choose from. Cannot recommend highly enough!
Alle 37 Rezensionen lesen

Mitwirkende & Entwickler

„Code Syntax Block“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Code Syntax Block“ wurde in 6 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Code Syntax Block“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

2.1.1

  • Fix undefined index error with $tag[‚code‘] not defined
    on archive page triggered by Beaver Builder

2.1.0

  • Behebt, dass die Hintergrundfarbe nicht angewendet wird, wenn keine Sprache angegeben wurde.
  • Behebt Probleme mit weißem Text auf hellem Hintergrund.
  • Wendet Farbsyntax auf alle Codeblöcke an, die Sprache ist nicht erforderlich.

2.0.4

  • Behebt, dass das Einfügen von einfachem Text, Elemente entfernt.
  • Entfernen von Formatierungswerkzeugen, die nicht funktioniert haben.

2.0.3

Compatibility fixes with TwentyTwentyOne theme
– Fixes default text when dark mode enabled
– Fixes linenumbers

2.0.2

Update package dependencies

2.0.1

Fix alignment with Twenty Twenty theme

2.0.0

Upgrade Prism to 1.22
Add Color Scheme options
Fix for WP 5.6 / GB 9.2

1.3.6

Update Prism language components
Adds new language support

1.3.5

Add Rust to default language list
Fix CSS issue with title
Upgrade Prism to 1.21

1.3.4

Fix setting default language using filter.

1.3.3

Fix block validation error for user roles with restricted permissions.

1.3.2

Fix issue with PHP warning when no posts

1.3.1

Fix compatibility issue with Gutenberg plugin 7.9
Removes in editor syntax preview added in 1.3.0

1.3.0

Upgrade Prism to 1.19
Add syntax preview in editor

1.2.4

Add filter to force loading assets, regardless of has_block

1.2.3

Conditionally load asset if has_blocks
Move Hack to front of default font list
Remove !important from font declaration
Change default font size to 15px for usability

1.2.2

Fix alignment issue with TwentyTwenty

1.2.1

Add Java and Kotlin to default language list

1.2.0

Upgrade Prism to 1.17.1

1.1.0

Add filters for customizing language list, and default language.

See full Release Notes on Github releases page