(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)

最終更新日:2017年11月28日  (初回投稿日:2017年11月17日)

本サイトの シンタックスハイライターを Prism(プリズム)に乗り換えました。
これまで SyntaxHighlighter 3.0.83 を使っていましたが、順次差し替える予定です。

Prism は こんなかんじ。

<!--HTMLの場合-->
<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>

<!--CSSの場合-->
<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>

Prism は 設置も簡単。しかも軽い。
MDN(Mozilla Developer Network)Prism を使ってるというのも導入の後押しになりました。
というわけで今回は、Prism の使い方をメモっておきます。

本日のINDEX
  1. Prism の特徴(メリット・デメリット)
  2. Prism の導入準備
    1. ダウンロードページで「圧縮レベル」を選ぶ
    2. テーマ(スタイル)を選ぶ
    3. 使用する言語を選ぶ
    4. プラグインを選ぶ
    5. CSS と js をダウンロード
  3. Prism の設置
  4. Prism の基本の使い方
    1. Prism の言語のリスト
  5. プラグインを使用する
    1. 行番号を表示する(Line Numbers)
    2. 行をハイライトする(Line highlight)
    3. コメントテキストに任意のリンクを作る(Autolinker)
    4. 言語を表示する(Show Language)
    5. コードにマウスオーバーするとプレビューする(Previewer各種)
    6. その他のプラグイン

Prism の特徴(メリット・デメリット)

一番のメリットは、ソースコードの記述が W3C が推奨するカタチなこと。

W3Cの仕様では、ソースコードを表記するときは、<pre>要素だけでなく <code>要素も一緒に使い、<code>要素に class属性で「language-◯◯」というカタチで「ソースコードの言語」を示すことを推しています。

Prism は、<pre> <code class="language-◯◯"> 〜 </code> </pre> という形が基本なので、まるっきりW3Cの推奨のカタチで書けます。
(これが <pre>要素だけで書かせる 他のシンタックスハイライター と違うところ なんだって)

そのほかのメリットは、
新要素・新プロパティに対応。言語数が多い。軽い。
「ハイライト行」をまとめて書けたりと、使い勝手もイイです。

一応デメリットは、<pre> と <code> で書くので、SyntaxHighlighter より記述が長く感じます。
また、タイトルを表示できない(SyntaxHighlighter は preの title属性でタイトルを表示できた)ので、ちょっと不便かな。JS自分で書ける人はできるんでしょうけど。
そして、 IE6 〜 8 は非対応だそうです。(もう要らないか)

Prism の導入準備

Prismダウンロードページで、自分に必要なものをカスタマイズしてからダウンロードするようになっています。(不要なダウンロードをしないようになってる)
JavaScriptファイルCSSファイルがダウンロードされます。

Prism のダウンロードページはこちら。
prismjs.com/download.html

ダウンロードページで「圧縮レベル」を選ぶ

まずはダウンロードするファイルの「圧縮レベル」を選びます。

要はミニファイ(インデントや改行が詰められていて軽い)されているかどうか。
JavaScript・CSSファイルを、自分で編集するなら「Development version」を選択。
編集せずにそのまま使うなら「Minified version」を。
ミニファイのほうが容量が小さくなります。(ミニファイして無くても相当軽いけど)

テーマ(スタイル)を選ぶ

次に「テーマ(スタイル)」を選びます。見た目の装飾です。
7種類用意されています。

7種類のテーマのプレビューは、左側の「縦に並んだ◯」のどれかを選択して↑、このページの一番下で見れます。(このサイト、見にくい。非デザイナーが作ったんでしょうね)

または Test drive(テストドライブ)ページで、 コードを入力してみたり、いろんな言語とテーマを選んで プレビューを確認できます。

使用する言語を選ぶ

ダウンロードページでの続きです。
「使用する言語(Languages)」を選びます。
127言語が用意されています(2017年11月現在)

プラグインを選ぶ

最後に「プラグイン(Plugin)」を選びます。
プラグイン名をクリックすると、そのプラグインの解説ページに飛べます。

最初の2つ「Line Highlight(ライン ハイライト)」と「Line Numbers(ライン ナンバーズ)」はゲットをオススメします。

Line Highlight(ライン ハイライト)」は、行をハイライトする。
Line Numbers(ライン ナンバーズ)」は行番号を表示するプラグインです。

CSS と js をダウンロード

必要なモノを選択し終わったらダウンロードします。
JavaScriptファイルと、CSSファイルが別々にダウンロードできるようになっています。

これは思いのほか効率的!
あとでテーマを変えたくなったら「CSSファイル」だけ、プラグインを追加したければ「JavaScriptファイル」だけをダウンロードすればいいので。

「prism.js」「prism.css」がダウンロードされます。

Prism の設置

HTML上に「prism.js」「prism.css」を設置します。

「prism.css」は、普通に <head>要素内に <style>要素で読み込ませます。

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <link href="css/prism.css" rel="stylesheet">
  </head>

「prism.js」は、<body>の一番最後に置きます。</body>の前。

    <script src="js/prism.js"></script>
  </body>
</html>

もうちょっと詳しい設置方法は、こちらをご覧ください。
Basic usage - Prism

Prism の基本の使い方

基本の使い方は、下のように <pre>要素の中に <code>要素を入れて、<code>要素に「class属性」で「language-xxxxというカタチで「言語」を指定します。

<pre><code class="language-markup">HTML</code></pre>
<pre><code class="language-css">CSS</code></pre>
<pre><code class="language-js">JavaScript</code></pre>

これは W3C が推奨する HTML5 での「ソースコード」用のマークアップそのままです。

これだけでソースコードが色分けされて表示されます。
行番号や 任意の行をハイライトさせるには「プラグイン」が必要。プラグインの使い方は記事後半で。

Prism の言語のリスト

Prism では「HTML」は <code class="language-markup"> と指定します。
その他はだいたい通常の略称っぽい。

この language-xxxx の「xxxx」の部分のリストはこちらです。(クリックで開きます)

<pre> の属性でプラグインを使用する

プラグインをダウンロードすれば、さまざまな拡張機能を使えます。
試してみたモノをいくつか紹介します。

行番号を表示する(Line Numbers)

プラグイン「Line Numbersをダウンロードして使います。
(プラグインはすべて「prism.js」に組み込まれます)

<pre>要素class属性で「line-numbers」と指定することで 行番号が表示されます。

<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>

<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>

最初の行番号は「1」以外にもできます。
<pre>要素 data-start属性で「数値」を指定することで、その数値の行からナンバリングされます。

<pre class="line-numbers"  data-start="5">
<code class="language-markup">some HTML code</code></pre>


マイナスの値も指定できます。

<pre class="line-numbers"  data-start="-7">
<code class="language-markup">some HTML code</code></pre>


行をハイライトする(Line highlight)

プラグイン「Line highlightをダウンロードして使います。

<pre>要素data-line属性で「数値」と指定することで、その数値の行がハイライト表示されます。

<pre class="line-numbers" data-line="1">
<code class="language-markup">some HTML code</code></pre>


「数値」の指定方法
・連続した行の場合:「1-5」といった具合で「ハイフン」でつなぎます。
・離れた行を複数:「2,6,18」といった具合で「カンマ」でつなぎます。
・合わせ技も可能:「1-5,18,22-26」といった指定もできます。

<pre class="line-numbers" data-line="1,4-6">
<code class="language-markup">some HTML code</code></pre>




コメントテキストに任意のリンクを作る(Autolinker)

プラグイン「Autolinkerをダウンロードして使います。

このプラグインは「URL」と「e-mail」は自動的にリンクを貼ります。

さらに コメントテキスト内に任意のリンクを貼ることができます。
[リンクのテキスト](https://ex.com/)
というカタチで書きます。(これは Markdown構文というモノ)

下のプレビューでは、「ほんっとにはじめてのHTML5とCSS3」の部分にリンクを指定しています。

<!--このプレビューでは下記のテキストにリンクを貼っています<br>
[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)
リンクを貼れるのは「コメント内」に限ります。-->

このように書いています。

[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)

Markdown構文の「タイトル」( [リンクのテキスト](https://ex.com/ "タイトル") )には対応していませんでした。

HTMLのコメントだけじゃなく、他の言語のコメントテキストでもできます。

言語を表示する(Show Language)

プラグイン「Show Languageをダウンロードして使います。

これは、何もしなくても自動的に言語を左下に表示してくれます。

コードにマウスオーバーするとプレビューする(Previewer各種)

まずはベースになるプラグイン「Previewer: Baseをダウンロードし、必要なプラグイン「Previewer: ◯◯」をダウンロードしてセットで使います。
下記の種類があります。

Previewer: Color
「色指定」部分にマウスオーバーすると、ポップアップで「色」をプレビューします。
どんな言語でも「色指定」の箇所に反応します。

Previewer: Gradient
「グラデーション」指定部分にマウスオーバーすると、ポップアップで「グラデーションカラー」をプレビューします。

Previewer: Easing
「イージング」指定部分にマウスオーバーすると、ポップアップで「イージング」をプレビューします。

Previewer: Time
スタイルで「時間」を指定した部分にマウスオーバーすると、ポップアップで「速度」をプレビューします。

Previewer: Angle
「角度」を指定した部分にマウスオーバーすると、ポップアップで「角度」をプレビューします。

その他のプラグイン

そのほか、
File Highlight(外部ファイルをハイライトする)
Keep markup(コード内に <mark>要素を使って強調できます)
Toolbar(「コードを選択」などの機能ボタンを作ったりつけたりできる)
など、おもしろそうなプラグインがいろいろ。

このほかのプラグインは、プラグイン インデックスから、各説明を見られます。

CSSを編集してオリジナルのスタイルに

この「ほんっとに..」では、テーマ「COY」の CSSをアレンジして使っています。

「Prism.css」は、ダウンロードしたテーマのまま一旦ブラウザプレビューしてみて、Web開発ツール(SafariのWebインスペクターなど)で CSSの構造を確認して、自分の好きなスタイルに変更します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

テーマ : webサイト作成
ジャンル : コンピュータ

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

ありがとうございます ^^

はじめまして ^^

「Prism.js」の大変詳しい解説をほんとにありがとうございます ^^
おかげさまで困ることもなくブログテンプレートに設定出来ました。
私もはやくSyntaxHighlighterから置き換えたいと思っております(笑)

甚だ勝手ではありますが、こちらの記事にブログカードリンクを張らせて戴きました ^^
よろしくお願い致します。

Re: ありがとうございます ^^

ぼっちんさま
コメントありがとうございます。
お役に立てて何よりです (^o^)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2018/08 | 09
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.