AH Prism Syntax Highlighter

Description

Easy to use and super lightweight code highlighting. A small tutorial is available by clicking the “Help” button when you write a new post. No settings required.

Supports html, css, php and javascript. The plugin is using the Prism.js by Lea Verou

Demo

You can find a demo of the plugin on the plugin homepage: Plugin Homepage

How to use the Prism Code Highlighting – EN

Possibility Nr. 1:

You got the code from a Gist at Github. Then you can insert the code directly into the visual editor, WordPress automatically encloses the code with the <pre> element. Then go to the text view and add <code class = "language-xxx"> behind the <pre> element. XXX stands for the code to be highlighted. Supported are markup (html), css, php and javascript. Do not forget that before the closing </pre> is a closing </code>. Once this is done, you can switch back to the editor’s visual view.

Example: <pre><code class="language-php">Your Code</code></pre>

Possibility Nr. 2:

Your code comes from your HTML editor (like Brackets, Atom, Dreamweaver and so on). Then first click on »Preformatted« in the visual view and paste the code. Then change to the text view and add the code element with the language class.

Example: <pre><code class="language-php">Your Code</code></pre>

DE: Möglichkeit Nummer 1:

Du hast den Code von einem Gist bei Github bekommen. Dann kannst Du den Code direkt in den Visuellen Editor einfügen, WordPress umschließt den Code automatisch mit dem <pre> Element. Gehe im Anschluss daran in die Textansicht und füge dort hinter dem <pre> Element ein <code class="language-xxx"> hinzu. XXX steht für den Code, den es zu highlighten gilt. Unterstützt werden markup (html), css, php und javascript. Vergiss nicht, dass vor dem schließenden </pre> ebenfalls ein schließendes </code> gehört. Ist dies erledigt, kannst Du bereits wieder in die visuelle Ansicht des Editors wechseln.

Beispiel: <pre><code class="language-php">Dein Code</code></pre>

DE: Möglichkeit Nummer 2:

Dein Code stammt aus Deinem HTML-Editor (wie z.B. Brackets, Atom, Dreamweaver). Dann klicke in der visuellen Ansicht zuerst auf »Vorvormatiert« und füge den Code dann ein. Wechsle im Anschluss daran dann in die Textansicht und ergänze dort wie bei Möglichkeit eins das Code-Element mit der Language-Klasse.

Beispiel: <pre><code class="language-php">Dein Code</code></pre>

Screenshots

  • Open Help-Button screenshot-1.(jpg).
  • Choose Prism Highlighter. screenshot-2.(jpg).
  • The Result screenshot-3.(png).

Installation

  1. Upload the plugin files to the /wp-content/plugins/prism-highlighting directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress
  3. Ready to use!

FAQ

None at this time.

Contributors & Developers

“AH Prism Syntax Highlighter” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.4

  • First release. Stable version.