prism.js

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2017-12-07 (木) 22:30:03

今度こそ、長年愛用してきた iG:Syntax Hiliter とおさらばすることになりそう。
寂しい><
前回

公式:Prism

【環境】
PrismJS: 1.9.0
導入
設定

公式サイトの ダウンロードページ にて設定。

わけも分からず、欲張って入れたので
Total filesize: 146.01KB (96% JavaScript + 4% CSS)
あちゃーw

()内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式:Supported languages

  • Compression level:
    • カスタマイズをしたいので、[Development version] を選択
  • Core
  • Themes
    • ダークテーマが好きなので、[Okaidia]
  • Languages
    • Markup(markup)
    • CSS(css)
    • C-like(clike)
    • JavaScript(javascript)
    • ActionScript(actionscript)
    • Apache Configuration(apacheconf)
    • AppleScript(applescript)
    • Bash(bash)
    • BASIC(basic)
    • Batch(batch)
    • C(c)
    • C#(csharp)
    • C++(cpp)
    • CoffeeScript(coffeescript)
    • Diff(diff)
    • Docker(docker)
    • Git(git)
    • Go(go)
    • Haskel(haskell)
    • HTTP(http)
    • Ini(ini)
    • Java(java)
    • JSON(json)
    • Less(less)
    • Markdown(markdown)
    • nginx(nginx)
    • Objective-C(objectivec)
    • PHP(php)
    • .properties(properties)
    • Python(python)
    • Ruby(ruby)
    • Sass (Sass)(sass)
    • Sass (Scss)(scss)
    • Scala(scala)
    • Smarty(smarty)
    • SQL(sql)
    • Stylus(stylus)
    • Swift(swift)
    • Textile(textile)
    • Twig(twig)
    • TypeScript(typescript)
    • VB.Net(vbnet)
    • vim(vim)
    • Wiki markup(wiki)
    • YAML(yaml)
  • Plugins
    • Line Highlight
    • Line Numbers
    • Autolinker
    • Show Language
    • JSONP Highlight
    • Highlight Keywords
    • Remove initial line feed
    • Command Line
    • Unescaped Markup
    • Toolbar
DL

ページ下部より .js と .css を個別に DL。

配置

テーマディレクトリ内に配置。

/theme_directory/css/prism.css
/theme_directory/js/prism.js
WordPress へ組み込み
/wp-includes/functions.php

へ、下記を追加。
nobbi LABO:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス(2017-03-27)


/*---------------------------------------------------------
 * Prism.jsの呼び出し
 ----------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'startPrism' );
function startPrism() {

 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20171206', true );
}
利用
書式

<pre>
<code>

</code>
</pre>

この中にコードを書くだけ。

メタ文字

HTML タグなどは、そのまま書くとおかしくなるので
調整が必要。

エスケープ(サニタイズ)

Syncer:HTML Escape / Unescape
mwSoft Tools:HTMLエスケープ(サニタイズ)ツール

スクリプト扱い

公式:Unescaped markup


<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

と書かれていたけど、実際にやってみるとうまく表示されない。

コメント化

公式:Unescaped markup


<pre class="language-markup"><code><!--
<p>Example</p>
--></code></pre>

と書かれていたけど、実際にやってみるとうまく表示されない。

改行

個人的には、下記のように、code タグとコード本文は改行して記述したいのだけど


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;script type=&quot;text/plain&quot; class=&quot;language-markup&quot;&gt;
&lt;p&gt;Example&lt;/p&gt;
&lt;/script&gt;
</code>
</pre>

このように記述すると、下記のごとく、

  • 先頭行が空白
  • 最後尾に空白

という見た目になってしまう。



<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

なので、

  • 公式:Remove initial line feed を導入することで先頭行を解決
  • code 閉じタグをコード本文の最後に続けることで最後尾を解決

<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;script type=&quot;text/plain&quot; class=&quot;language-markup&quot;&gt;
&lt;p&gt;Example&lt;/p&gt;
&lt;/script&gt;</code>
</pre>
class

<code> へ class=”language-xxxxx” と指定。


<pre>
<code class="language-xxxxx">

</code>
</pre>

xxxxx に書くべきワードは、上述。

行番号
サンプル
クラスの設定方法

公式:Different markup

言語毎のサンプル

公式:Per language examples

カスタマイズ
言語表記

下記優先順位にて決定される。

  1. <pre data-language=”xxxxx”>
  2. var Languages に定義されている内容
  3. <code class=”language-xxxxx”>

<code class=”language-xxxxx”> の xxxxx の部分に
prism.js 内に定義されていない語句を書けば、
Plain Text と判断されて、文字色は白一色となり
言語名は、xxxxx がパスカライズされる。

文字サイズ

言語表記が小さいと感じたので、font-size を修正。


pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
	color: #bbb;
	/* font-size: .8em; ← コメントアウト */
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}
行ハイライト

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
-	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: linear-gradient(to right, rgba(255, 255, 0, .3) 70%, rgba(255, 255, 0, 0));

138行目。
hsla はピンとこないので、rgba に書き換えて、アルファ値を調整した。

文字色

諸々調整。

Library & PlugIn & AddIn,WordPress | 2017-12-07 (木) 22:30:03 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment