JavaScript: How to implement Prism.js on the website

Other language site
ja ja
Google Translate
  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
JavaScript logo

How to implement Prism.js with highlight display function such as source code on web page.

It can be used as an alternative to highlight.js.

It is also available in WordPress.

Download js file, css file

Before downloading, set options of the functions to be used. Settings are done on Prism.js download site.

prism-01-min

This is the top page. Click the "Download" button in the upper right.

prism-02-min

There are plenty of options. I will select this as your preference.

 Option setting

 Compression level

The default Minified version is OK. We will need almost no development environment.

 Themes

Please choose the theme surrounded by the circle on the right. Then, please move to the bottom of the page. Samples are displayed.

 DEFAULT

prism-03-min

DARK

prism-04-min

FUNKY

prism-05-min

OKAIDIA

prism-06-min

TWILIGHT

prism-07-min

COY

prism-08-min

SOLARIZED LIGHT

prism-09-min

Look at the sample and select the theme. This site adopts COY.

Languages

prism-10-min

Select the program language pattern you need.

You can select everything with "Select / unselect all". However, the volume of js and css files increases by that much, which is not good for the performance of the site.

Let's choose only what you need.

If more items are needed later, re-set options on this site and re-download. You can change it by overwriting the file on the server.

Plugins

prism-11-min

I selected only two of "Line Highlight" and "LineNumbers".

At the beginning "Copy to Clipboard" was also attached a copy button.

At that time, I made copy protection of the entire site.

We have made it possible to copy only the <pre> <code> </ code> </ pre> tags.

However, since only the copy button does not work, it is currently out.

How to install js file, css file

Click the two buttons "DOWNLOAD JS" and "DOWNLOAD CSS" at the bottom of the page to download the file.

Upload the downloaded file to any location on the server. Then add the <link>, <script> tags to <html> and <body> of html.

<!DOCTYPE html>
<html>
<head>
<link href="themes/prism.css" rel="stylesheet" /></head>
<body>
<script src="prism.js"></script></body>
</html>

In "Basic Usage" under the home of the Prism.js site, the css file is placed in the <head> tag. However, I put it at the bottom of <body>. Still it works normally.

It would be better for site performance.

How to install in WordPress

In WordPress, add the following contents to function.php.

/**
* Setting Prism.js
*/
function prism_enqueue_scripts() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/(theme path)/js/prism.css' );
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/(theme path)/js/prism.js', array('jquery'), '20170720', true );
}
add_action( 'wp_enqueue_scripts', 'prism_enqueue_scripts' );

Easy usage example

The highlighting of the above html statement is described as follows.

<pre class="line-numbers"><code class=" language-markup"><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token punctuation">&lt;</span>html<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>head<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themes/prism.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>head<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prism.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>body<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;/</span>html<span class="token punctuation">&gt;</span></span></code></pre>

The point to pay attention to is setting of <pre> and <code> class.

In this example, line number (line-numbers) and html (language-markup) are specified.

The class name of the language setting is described in "Basic Usage" at the bottom of the site home. Links are also affixed about how to use each plugin.

Is not it much the same as highlight.js? You might think that. I think that it may be used properly depending on the preference and the role of each function. But I think it is a good thing to have more than one choice.

SNS also distributes articles.
Leave a Reply

*

If you like this article, share it!