Finite Clause

テック系記事を書くための検証サンプル

概要

テック系のブログ、特にコードのスニペットなどを貼り付けたい場合、
シンタックスハイライトのついたコードをどうやって表示するかについて考える。
またその過程で、コンテンツとしてどういった管理方法が理想なのかも考えたい。

検証

プラグインを使う

以下は、Prism.jsを使ったサンプル

JavaScript

結構ちゃんと出て嬉しい。 微妙に足りないところはあるものの、概ね満足。


(function() {

  'use strict';
  // we usually do this to create private space
  var sampleCode = 'this is sample code';
  /* multiline comment */
  let blockScoped = null;
  const CONSTANT_VALUE = 'THISISCONST';
  module.exports = {
    sample: () => {

      self = this; // we don't have to do this.
    }
  };

})();

HTML

HTMLも問題なく出た。
ただし、Jadeではlang-jadeと書いても適応されない…
基本私はテンプレートエンジンをJadeと決めている。
一番Node.jsと相性がいいと思ってるし書きやすいからだ。

<div class="sample">
  <a href="/jade/sample">link</a>
  <p>This is jade template sample</p>
</div>

CSS

基本的なものは問題ないようだ。
ちなみにCSSのプリプロセッサを以前はsassを使っていたが、
Node.jsで完結してた方がインストールが楽だったので
こっちに移行した記憶がある。
stylusではうまく行かなかった。


.sample {
  width: 100%;
}
.sample a {
  color: blue;
  font-size: 12px;
}
余談

別のプラグインとして、highlightjsも試した。
こっちはnpmでインストールしてrequireすることで読み込むことができる。
それにもかかわらず、テーマを読み込む手段を探すのが手間だった。
やはり完璧なものにはならない。

Code Pen

CodePenの埋め込みを使うパターン。 こっちのほうがハイライトがちゃんとついて綺麗に見える。

See the Pen Sample by Yu Kato (@katsew) on CodePen.

たしかに綺麗に見えるのだが、コンテンツの管理形態が分離してしまうのと、
コンテンツに対するオーナーシップがなくなっていく気がするのであまりよくはない。
自前でCMSを作るなら、コードスニペットだけを分離できるが、一つのコンテンツの断片として
何かしらの形で、定義できるとよいのかもしれない。

まとめ

プラグインを利用すれば、コンテンツとして見せる上で綺麗に見せれそうだ。
ただし、導入だけでなく、特にテーマ部分をカスタマイズする必要がある。
そういった意味で導入ハードルは高い。
また、CSSに依存するタイプのプラグインはnpmから使いづらくなる。
ここはずっとなんとかしたいと思っているが、良い方法がまだ見つかっていない。
(webpackをもう少しがんばったら見えてくるのかもしれない…)

CodePenからコンテンツを移行するのはハードルが高そうだった。
CodePen自体に投稿サービスが存在するのでそっちをここへ持ってくるのも手だと思ったが、
いまは、CMSは一つであるべきだと思っているのでしないことにする。

しばらくは、生のHTML, CSS, JavaScriptでスニペットを書くべきか… 一旦はCDNからprism.jsを適応して運用してみようと思う。