How to add PrismJS Codesnippets To WordPress

How to add PrismJS Codesnippets To WordPress

This is a guide on how to implement prismJS (a code snippet editor) to wordpress. And how to use prismJS both inside the admin panel, and wordpress.com’s writing tool. So you can write and add code snippets seamlessly.

What is prismJS?

It’s a popular syntax code highlighter, commonly used in webdevelopment blogs and documentation. Examples include reactJS, css-tricks, sitepoint, and smashing magazine. You’re in good hands if the all top CSS blogs use prismJS.

Why choose prismJS over alternatives like highlightJS or crayon syntax highlighter?

Crayon syntax highlighter is no longer supported by the core developer, and neither is highlightJS. It also lacks functionality – namely some languages are not supported. So if you are writing about the latest language or some obscure language, your out of luck. HighlightJS in particular lacks extra features you may want – it doesn’t support line-numbers, file-names, among other things. You can read the full list of what prismJS offers for plugins (which is almost everything highlightJS does not offer).

To add prismJS to you wordpress, you can do one of two things

  1. Add prismJS manually. Read more about it here
  2. Install the prismJS wordpress extension

I will cover #2 because this is the easier of the two

1. Go to your admin panel

Go to your admin panel and type in “prismJS”, select it and click “Install Now”

2. Make a page or post to test it out

Make a new post or page. I call mine “test” here. If you are on the backend admin page, you can add prismJS one of two ways:

  1. Use the prebuilt “Prism Assistant”
  2. Go to “text” and manually paste in the codes

Option 1

For option 1, click prismJS here

There will be a dialog box that pops up

Paste the following code snippet in language markup (markup just means HTML).

body{
  padding: 0;
  margin: 0 auto;
}

Option 2 – Paste directly from wordpress.com’s editor

I would not recommend this method, it has caused numerous errors for me in getting this to work properly. To use this method, go to your wordpress.com visual editor. Click the “HTML” tab. Paste in the following code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare

<pre class="line-numbers"><code class="language-css">body{
  padding: 0;
  margin: 0 auto;
}
</code></pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare

Note that you have to paste it just like that. The body tag does not look semantic this way, but this is the only option around this

Results should be as follows:

Leave a Reply

Your email address will not be published.