Prism

以前、シンタックスハイライトのプラグインを紹介しましたが、

実際使ってみるとかなり重くて都合が悪かったので、プラグインなしでシンタックスハイライト表示を試みる事にしました。

いくつかみたのですが、「Prism.js」が良さげだったので、こちらを導入しました。

以下、方法の備忘録。

Prism.js のダウンロード

公式サイトからダウンロードします。

テーマ を選択

Theme は、

  • Default
  • Dark
  • Funky
  • Okaidia
  • Twilight
  • Coy
  • Solarized light
  • Tomorrow night

から選べます。

私は、「Okaidia」を選択しました。

Prism1

必要な言語を選択

たくさんの種類の言語を扱っていますが、全部選択すると重くなるので、必要最低限を選択。

デフォルトは、下記。

  • Markup + HTML + XML + SVG + TathML + SSML + Atom + RSS
  • CSS
  • C-like
  • JavaScript

私はこれに下記3つを追加しました。

  • R
  • Python
  • Regex

プラグインを選択

プラグインもたくさんありますが、必要だと思うもののみ。

私は下記を選択。

  • Line Highlight
  • Nine Numbers
  • WebPlatform Docs
  • File HIghlight
  • Highlight Keywords
  • Command Line
  • Toolbar
  • Copy to Clipboard Button

ダウンロード

選択が終わったらダウンロード。

JS と CSS の2つをダウンロードします。

Prism3

JS ファイルと CSS ファイルのアップロード

ダウンロードしたファイルをサーバーにアップロードします。

私は、わかりやすいように子テーマの中にいれました。

私はエックスサーバーを使っているので、下記方法でアップロード。

エックスサーバーのファイルマネージャーにログイン
  ↓
ドメイン名 > public_html > wp-content > themes > 子テーマ

Prism4

function.php に追記

prism.js と prism.css を読み込みの方法はいくつかあるのですが、私は子テーマの function.php の一番下に、下記を追記しました。

// prism.jsの有効化 Start
function my_prism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_prism' );
// prism.jsの有効化 End

使い方

記事中でこの機能を使うときは、

<pre>

タグと

<code>

タグでコードを括ればOK。

言語の指定

<code class="language-言語>

という感じに、codeタグの中で言語を指定します。

input
<pre>
<code class="language-css">
.chart{
background-color: #fafafa;
margin: 40px 0px;
padding: 30px 30px 5px 30px;
font-weight:600
}
</code>
</pre>

output

.chart{
background-color: #fafafa;
margin: 40px 0px;
padding: 30px 30px 5px 30px;
font-weight:600
}
言語名 指定文字列
HTML
SML
SVG
MatdML
language-markup
language-html
language-xml
language-svg
language-matdml
CSS language-css
javascript language-javascript
language-js
R language-R
Python language-py
language-python
C language-c
C++ language-cpp
C# language-csharp
language-dotnet
Docker language-docker
language-dockerfile
Git language-git
PowerShell language-powershell

下記から Example を確認できます。

行番号を追加

プラグインで「Line Numbers」をいれていると、行番号を追加することが可能です。

<pre class="line-numbers">

で指定します。

input
<pre class="line-numbers">
<code class="language-r">
x <- 2+3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2+3
x
install.packages(knitr)
y <- 1:20 plot(y)

行のハイライト

指定した行をハイライトします。

<pre data-line = "行番号">

で指定します。

複数行をつなげるときは、「,」でつなぎ、連続する場合は、「-」でつなぎます。

input
<pre data-line = "1,3">
<code class="language-r">
x <- 2+3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2+3

install.packages(knitr)
y <- 1:20 plot(y)

行番号 + 行のハイライト

行番号を追加し、指定した行をハイライトする場合は、

input
<pre class="line-numbers" data-line = "1,3">
<code class="language-r">
x <- 2+3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2+3

install.packages(knitr)
y <- 1:20 plot(y)

記述の注意点

<pre>タグの中に「<」「>」 を入れる場合は、コードそのものと勘違いされるので、

「<」「>」 でエスケープする必要があります。

References

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ ワーキングマザー育児へ