JavaScript: Prism.jsをWebサイトに実装する方法

  • -

    シェア
  • ---

    LINEで送る
  • -

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

    pocket
  • -

    rss
他言語サイト
us us
JavaScript image

ソースコードのハイライト機能をもつPrism.jsの実装方法です。highlight.js の代わりに利用できてWordPress でも使えます。

jsファイル、cssファイルのダウンロード

ダウンロードする前に使用する機能のオプション設定を行います。設定はPrism.js のサイトで行います。

prism-01-min

これがトップページです。

右上の”ダウンロード”ボタンをクリックします。

prism-02-min

たくさんのオプションがあります。これを自分の好みで選択していきます。

 オプション設定

 Compression level

デフォルトのMinified versionでいいです。開発環境はほとんど必要ないでしょう。

 Themes

右の○で囲まれたテーマを選んでページの一番下に移動してみて下さい。サンプルが表示されています。

 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

サンプルを見てテーマを選択します。このサイトではCOYを選びました。

Languages

prism-10-min

自分が必要なプログラム言語パターンを選択します。

”Select/unselect all” ですべてを選ぶことができますが、その分だけjsファイル、cssファイルのボリュームが大きくなるため、サイトのパフォーマンス上よくありません。

必要なものだけを選択しましょう。

あとで必要になるものが増えた場合は、再びこのサイトでオプションを設定しなおして、再ダウンロードしたファイルをサーバに上書きすれば変更できます。

Plugins

prism-11-min

ぼくは、”Line Highlight” ”LineNumbers” ”Copy to Clipboard”の3つを選択しています。

jsファイル、cssファイルの設置方法

ページ一番下の”DOWNLOAD JS” ”DOWNLOAD CSS”の2つのボタンをクリックしてファイルをダウンロードします。ダウンロードしたファイルをサーバの任意の場所にアップロードしてださい。

htmlの<head>や<body>に<link>、<script>タグを追加します。

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

Prism.jsサイトのホームの下の方にある”Basic Usage”では、jsファイルは<head>タグに設置しています。しかし、<body>の一番下に配置しても正常に動作します。サイトパフォーマンスから見ると、body下の方がよいでしょう。

WordPressでの設置方法

WordPressでは、function.phpに以下を追加します。

/**
* 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' );

簡単な使用例

上のhtml文のハイライトは次のように記述します。

<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>

注目するところは、<pre>と<code>のclassの設定です。

ここでは、行数表示(line-numbers)とhtml(language-markup)を指定しています。

言語設定のクラス名については、ダウンロードページのホームの下の方にある”Basic Usage”に記載されています。各プラグインの使い方についてもそれぞれリンクが貼られています。

highlight.jsとあまり変わらないじゃないか?と思うかもしれませんが、好みやそれぞれの機能の役割によって使い分けることもあると思います。ただ選択肢が複数あるというのはメリットだと思います。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!