Ghostのカスタムテーマ作成(その2)

ソフトウェア開発系ブログでは、必須となるコードのハイライト機能と、Lightboxのような機能をCasperベースのサンプルテーマに追加してみる。

プログラムコードのハイライト

Ghostの場合、```でコードを閉じるだけでハイライトすることができるが、プログラム言語ごとの色分けまでは対応していない。

var hoge = function(){
	var i = 0;
}

ここではPrismを使った色分けのやりかたを記載する。

var hoge = function(){
	var i = 0;
}

Prism http://prismjs.com/

上記のサイトにアクセスして、テーマや対応言語を選択してダウンロードすると、prism.jsprism.cssがダウンロードされる。

これらをassets/jsおよびassets/cssにそれぞれ配置して、default.hbsにprism.cssとprism.jsを定義するだけで良い。

default.hbs

<head>
	:
	<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
    {{ghost_head}}
</head>

<body>
	:
	<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>

LightBox機能を実現する

jQueryプラグインのfluidboxを使ってLightBox的な機能を実現する。
CDNサービスを使わずにスタンドアロンでの設定方法を記す。

fulidbox http://terrymun.github.io/Fluidbox/demo/index.html

上記サイトからjsとcssをダウンロードし、assets/cssおよびassets/jsに配置する

assets/css/fluidbox.min.css
assets/css/fluidbox.min.css.map
assets/js/jquery.fluidbox.min.js

default.hbs

最後にセレクタに対して、fluidbox()を実行する。
$('a')をセレクタとすると、何でもかんでも対象になってしまうので、除外したいものがある場合、
:not()を追加する。

<link rel="stylesheet" type="text/css"
	href="{{asset "css/fluidbox.min.css"}}" />
:
<script type="text/javascript"
	src="{{asset "js/jquery.fluidbox.min.js"}}"></script>
<script>
		$('a:not(.logo)').fluidbox();
</script>

リンクのMarkdownにimageのMarkdownをネストすると、
投稿ページに表示する画像がxxx.jpg、Fluidboxで表示する画像はzzz.jpgになる

[![](/content/images/xxx.jpg)](/content/images/zzz.jpg)

ちなみにMarkdown記法だと、サイズなどが指定できない。その場合、素直にhtmlで記述するか、altを使ってcssの設定と紐付ける。

以下の場合、blogimgという名称に対し、最大幅100pxとした場合、xxx.jpgが幅100pxで表示するようになる。

[![blogimg](/content/images/xxx.jpg)](/content/images/zzz.jpg)
img[alt=blogimg]{
	max-width: 200px;
}