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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
JavaScript image
イラストACの画像をもとに加工しています。

ソースコードのハイライト機能をもつ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

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

Languages

prism-10-min

ハイライトで表示するソースコードのプログラム言語を選びます。

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

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

あとで追加したいときは、再びこのサイトでオプションを設定しなおして、再ダウンロードしたファイルをサーバに上書きすればいいです。

Plugins

prism-11-min
Line Highlight行の強調
LineNumbers行数
Copy to Clipboard Buttonコピーボタン
Download Buttonダウンロードボタン

このあたりを選べばいいでしょう。あとはお好みで。

コピーボタンやダウンロードボタンを選ぶと『Toolbar』も自動で選択します。

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="langage-markup">html here</code></pre>

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

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

言語設定のクラス名については、ダウンロードページのホームの下の方にある 『Supported languages』 に説明があります。各プラグインの使い方については『Plugins』を見てください。

highlight.jsとあまり変わらないじゃないか?と思うかもしれませんが、好みやそれぞれの機能の役割によって使い分けることもあると思います。

また、選択肢が複数あるのでいい方を選べるのはいいことです。

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

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

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

tadtadya.com

_

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

*

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

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