まずは数式。MathJax を使う。
ブログの設定画面から「テンプレート」「HTMLの編集」に移動し、head タグ内に以下の記述を追加する。
設定 → テンプレート → HTMLの編集 → <head>タグ内<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript">
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
displayAlign: "left",
displayIndent: "2em",
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
このような表示になる。エントリ編集変数$x$と\(y\)があり、
$$x = 1$$
\[
y = 2
\]
という時に、式$\ref{sample}$が成立する。
\begin{equation}
2x = y\label{sample}
\end{equation}
変数$x$と\(y\)があり、
$$x = 1$$
\[
y = 2
\]
という時に、式$\ref{sample}$が成立する。
\begin{equation}
2x = y\label{sample}
\end{equation}次にソースコードだが、以下の理由から Syntax Highlighter は使わなかった。
- Syntax Highlighter の CDN が HTTPS に対応していない
- 言語毎に js ファイルを読み込まなくてはならない
- テーマにあまり良いものが無い
- HTTPS に対応している
- ひとつの js を読み込むだけで言語を自動的に判断してハイライトする
- テーマが豊富にある
- 私の好きな tomorrow-theme があった
設定 → テンプレート → HTMLの編集 → <head>タグ内<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/tomorrow-night.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
テーマの設定は highlight.jsのデモ を見て、好きなテーマに該当する css ファイルを指定すれば良い。以下のような感じになる。
<pre>sample program<code>@requires_authorization
def somefunc(param1='', param2=0):
r'''A docstring'''
if param1 > param2: # interesting
print 'Gre\'ater'
return (param2 - param1 + 1 + 0b10l) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''
</code></pre>
sample program@requires_authorization
def somefunc(param1='', param2=0):
r'''A docstring'''
if param1 > param2: # interesting
print 'Gre\'ater'
return (param2 - param1 + 1 + 0b10l) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''
細かな設定は highlight.jsのusage や highlight.jsのreadthedocs を参照すれば良い。
MathJax も highlight.js も、テンプレートを「動的ビュー」のものにしてしまうと、jQueryの何らかとバッティングしてしまうせいか、なかなか動かない。
動的ビュー以外のテンプレートにすることが無難。
また、表などのスタイルのために bootstrap の CSS を読み込むようにする。
設定 → テンプレート → HTMLの編集 → <head>タグ内<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css' rel='stylesheet'/>
bootstrap のCSS定義についてはbootstrap のサイトを参照する。
0 件のコメント:
コメントを投稿