Dieses Plugin ist nicht mit den jüngsten 3 Hauptversionen von WordPress getestet worden. Es wird möglicherweise nicht mehr gewartet oder unterstützt und kann Kompatibilitätsprobleme haben, wenn es mit neueren Versionen von WordPress verwendet wird.

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 auf der Plugin-Einstellungsseite 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?

Yes, on the plugin settings page in the dashboard you can set a default language when inserting a code block. You can still change if you wish to show code not using the default language.

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

19. September 2023
Colourise syntax of existing code blocks - great! Wonderful simple options of setting a default theme (e.g. dark/light) and a default code type (e.g. PHP). Just what I was looking for, thanks! Happily working on WordPress 6.3.1 Sept 2023.
15. Juni 2022
This is a great plugin - exactly what I was looking for! Thanks so much! Also works with this plugin for copy functionality https://wordpress.org/plugins/code-click-to-copy/
Alle 46 Rezensionen lesen

Mitwirkende & Entwickler

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

Mitwirkende

„Code Syntax Block“ wurde in 8 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

= 3.1.1

  • Fix trailing comma error, PHP 7

= 3.1.0

  • Add plugin settings page
  • Move global scheme setting to settings
  • Move default language to settings
  • Ugrade Prism to v1.28.0

= 3.0.0

  • Remove support pre WP 5.6
  • Editor view: Show dark background
  • Editor view: Show labels above code block
  • Publish view: Fix line number alignment
  • Publish view: Remove border from code Twentytwentytwo
  • Chore: Update dependencies

= 2.2.0

  • Upgrade Prism to v1.25.0

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