The Prismatic plugin follows the same conventions used by [Prism.js](http://prismjs.com/) and [Highlight.js](https://highlightjs.org/). Here are the basic steps:
1. Visit the Prismatic General Settings and choose your library
2. Visit the settings tab for your chosen library
3. Choose a theme and configure your options
Once the settings are configured, you can enable syntax highlighting for any code snippet by doing one of the following:
With the proper markup in place, you can indicate a specific language by adding a class of `language-***` or `lang-***` to the `<code>` tag (where `***` is the language identifier).
For example, to indicate PHP as the language for a single-line code snippet (Prism.js only):
Likewise, to indicate HTML as the language for a multi-line code snippet:
<pre><code class="language-html">
<table>
<tr>
<th>Name</th>
<th>Side</th>
<th>Role</th>
<tr>
<td>Darth</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</table>
</code></pre>
So the prefix of the class names are the same for Prism.js and Highlight.js. The difference is the language identifier used to specify each language. Check out the following "About Prism.js" and "About Highlight.js" sections for more information.
__Note:__ In addition to detecting the `language-` and `lang-` prefixes, Highlight.js also will try to auto-detect the language without it being specified. Plus as an option, you can enable the Highlight.js setting, "Support no-prefix class names" to enable use of language identifiers without any `language-` or `lang-` prefix.
For example, the code snippets included in either of the following markup examples would be escaped:
This is a single-line example, <code><?php echo 'Hello world'; ?></code>.
This is a multi-line code example:
<pre><code>
<table>
<tr>
<th>Name</th>
<th>Side</th>
<th>Role</th>
<tr>
<td>Darth</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</table>
</code></pre>
So what exactly happens when the "Code Escaping" options are enabled? Here is a summary that applies to each section (post content, excerpts, and comments):
* __Frontend only__ - code snippets are escaped at runtime (no changes made to content in the database)
* __Admin Area only__ - code snippets are escaped when viewed via the Admin Area (changes will be saved to database if the "Update" or "Publish" button is clicked)
* __Frontend & Admin Area - both of the previous are applied
* __None__ - all code escaping is disabled
Note that each library -- Prism.js, Highlight.js, and Plain Flavor -- features its own code-escape settings. So the code-escape settings that are applied depends on the currently active library. Visit the plugin's General Settings to choose your library. Then visit that library's tab to configure its code-escape settings.
When code escaping is enabled for either/both the frontend or Admin Area, the plugin makes the following changes to any code contained within `<code></code>` tags:
\r removed
& replaced with &
< replaced with <
> replaced with >
trailing whitespace removed
These are the _only_ changes made to your code, no other changes are made.
As mentioned, the difference between code escaping on the frontend vs. the Admin Area is that, on the frontend, the above changes are made at runtime and not saved to the database; whereas in the Admin Area, the changes are made when the code is viewed via a content editor, such that any changes made will be saved to the database when the user clicks the "Update" or "Publish" button. Please keep this in mind when choosing your code-escape settings.
__Important!__ As explained, enabling code escaping in the Admin Area may result in the escaped code getting saved in the database. This is fine in most cases, but there may be situations where escaping should only happen at runtime. If that is the case, or if you are unsure, choose the "Frontend only" option for the "Code Escaping" setting. The "Frontend only" option only modifies code when displayed on the frontend and does not save any changes to the database.
**About Prism.js**
Prism.js version used in Prismatic plugin: __1.5.1__
To disable Highlight.js syntax highlighting for any code block, add a class of `nohighlight`, like so:
<code class="nohighlight">...</code>
_I'm glad to add more languages, [make a suggestion](https://perishablepress.com/contact/)_
== Upgrade Notice ==
To upgrade Prismatic, remove the old version and replace with the new version. Or just click "Update" from the Plugins screen and let WordPress do it for you automatically.
__Note:__ uninstalling the plugin from the WP Plugins screen results in the removal of all settings from the WP database.
== Frequently Asked Questions ==
**Can you add another language for Prism.js or Highlight.js?**
Yes, feel free to [suggest a language](https://perishablepress.com/contact/)
**Got a question?**
Send any questions or feedback via my [contact form](https://perishablepress.com/contact/)
== Support development of this plugin ==
I develop and maintain this free plugin with love for the WordPress community. To show support, you can [make a cash donation](http://m0n.co/donate), [bitcoin donation](http://m0n.co/bitcoin), or purchase one of my books:
* [The Tao of WordPress](https://wp-tao.com/)
* [Digging into WordPress](https://digwp.com/)
* [.htaccess made easy](https://htaccessbook.com/)
* [WordPress Themes In Depth](https://wp-tao.com/wordpress-themes-book/)
And/or purchase one of my premium WordPress plugins:
* [BBQ Pro](https://plugin-planet.com/bbq-pro/) - Pro version of Block Bad Queries
* [SES Pro](https://plugin-planet.com/ses-pro/) - Super-simple & flexible email signup forms
* [USP Pro](https://plugin-planet.com/usp-pro/) - Pro version of User Submitted Posts
Links, tweets and likes also appreciated. Thank you! :)