WordPress×コードの埋め込み×LaTeXで技術系ブログの下準備

技術系のブログを書く際に必要になるWordPressへのコードの埋め込みとLATEXによる数式の表示方法の説明.
使用しているデザインはCocoon.

SyntaxHighlighter Evolved

ブログを始めるにあたってコードを綺麗に表示させるため, SyntaxHighlighter Evolvedを用いた.
SyntaxHighliger Evolvedのプラグインの準備については, 以下のサイトを参照してください.
SyntaxHighlighter Evolved – 記事の中でソースコードを綺麗に表示できるWordPressプラグイン

プラグインを導入すると, 記事を投稿する + ボタンの中にSyntaxHighlighter コードが現れる.

上のSyntaxHighlighterコード部分

これを選択してコードを打ち込む. ハイライトさせるコードの選択は, デフォルトだと右側の設定に現れるブロックの部分に”コード言語”の選択部分がある. ここからコードを選択する. すると以下のように, 行番号付きでコードがハイライトされる. 今回の場合はpythonの例を示した.

普通の文章と見分けずらいので, デザインを変更する. デザインの変更にはダッシュボード→プラグイン→プラグイン一覧からSyntaxHighligheter Evolved の設定を選択-> テーマ からデザインを変更可能. 下のテーマは, Fade to Greyである.

注:SyntaxHighligheter Evolvedでコードがうまく表示されない場合, Cocoonを用いていれば, Cocoonの設定 -> コード -> ハイライト表示 から ソースコードをハイライト表示 のチェックを外せば直る可能性がある.

この方法の欠点は, 出力が確認できないこと. あきとしはjupyter notebook上で作業することが多いこと, また出力を確認しながら説明したい時があるから, アウトプットも一緒に乗せる方法もここで紹介しておく.

jupyter notebookを.htmlに出力して貼り付ける方法.

jupy2wp というパッケージを用いれば, jupyter notebookのコードをそのままWordPressに出力出来るようになる.

だが, もっとシンプルな方法としては, jupyter notebookでコードを.hmtl出力してそれを記事内に貼り付ければ, 別windowになるがコードと出力をセットで確認できる.

他の方法は↓で紹介されている.
Jupyter NotebookのドキュメントをWordpressに貼り込む

———- 雑感(`・ω・´) ———-

Cocoonにもデフォルトでコードをハイライトしてくれる機能はあるよ!それは注:に書かれている部分のチェックをつけて, ブロック編集中に出てくるタブの一番左をクリックして, 変換から整形済みを選ぶ. その後に, この記事 (ソースコードをハイライト表示させる方法)に書かれているように<pre></pre> のようなpreタブを用いればハイライトさせることが出来るよ。
ただ, 問題は行番号が表示されないことだよ!一手間かければできるみたいだけれども…

LaTeXで数式を書く

次のサイトが参考になった.
WordPressで数式を使いたい! 「MathJax-LaTeX」の使い方とコマンド一覧
MathJax-LaTeXで数式が上手く表示できない時の対処法
WordPressで数式を表示させる

MathJax-LaTeXのプラグインをインストール有効化. また, 設定の項目にいき, 一番上にあるForce Load にチェックを入れる. 数式を書く際にはブロックの最初に[mathjax] を入力し, 数式部分を$$で挟めば表示される.

[mathjax]
$$ e^{i\theta} = \cos \theta + i \sin \theta $$

と入力すれば,


$$ e^{i\theta} = \cos \theta + i \sin \theta $$

として表示される.
これで技術系のブログを書くために必要なコードと数式をブログ内に埋め込む方法を押さえることができる.

その他
スポンサーリンク
あきとしのスクラップノート

コメント

  1. けーづー より:

    あきとし!

タイトルとURLをコピーしました