WordPress で記事を Markdown で書きたい

先程記事書いたばかりですが、Markdown のリアルタイムプレビューなら shime/livedownmobily/markdown-live(いずれも Sublime Text 関係なく、ターミナルから起動して使う)とか、Sublime Text のパッケージなら Omni​Markup​Previewer だと他にいろいろインストールしなくてもリアルタイムプレビューできるよ!と教えてもらいました。さらにコードハイライトは Gist 埋め込みがおすすめということで、どうぞこちらもご覧くださいませ

Markdown なんてこれくらい覚えとけばいいよ、という話を聞いたので、WordPress の記事作成でも使えるようにしてみました。

最初に思いついたのはプラグイン!だったんだけど、今後何かの理由でプラグインが使えなくなったとき、記事本文が Markdown で書かれていたら表示がひどいことになるんでないべか…とぷるぷるしたので、Sublime Text で下書きしたのをコピペする作戦にしました。

Sublime Text で Markdown をリアルタイムプレビュー

SublimeText3 Plugin+Markmon+PandocでMarkdownをHTMLリアルタイムプレビューする – Qiita という、私がまさに今やりたいことが丁寧にまとめられている記事を見つけたので、まるっと同じ手順でインストールさせていただきましたー!自分のブログと同じ見た目のスタイルシートを用意したら完璧(そのうちやりたい)

ところでこの方の Qiita ってなんでぴんくなの?

google-code-prettify でコードをかっちょよく

WordPress で Markdown ほげほげで調べている途中google-code-prettify の存在を知りました。

You can load the Prettify script to highlight code in your web pages. It adds styles to code snippets so that token boundaries stand out and your readers can get the gist of your code without having to mentally perform a left-to-right parse.

GettingStarted – google-code-prettify – How to style code in your web-pages – syntax highlighting of code snippets in a web page – Google Project Hosting

コードの見た目をかっちょよくしてくれるのね!ステキ!

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

これをテーマの header.php に追記。スタイルは style gallery より sunburst.css にしました。カスタマイズはこの CSS を見て、自分のテーマの style.css で上書きする。

pre タグに追加したい class は、prettyprint と、行番号をすべて表示するための linenums のふたつ。

Sublime Text で Markdown を HTML 形式で書き出す

書き出し用のパッケージを使おうかと思ったけど、リアルタイムでブラウザプレビューされてるんだからソースの表示で充分ですが、google-code-prettify 用の class を付与するカスタマイズ方法がどうやってもわからなかったので、jQuery でなんとかしてもらうことに。

jQuery('pre.sourceCode').addClass('prettyprint linenums');

これを header.php の google-code-prettify 読み込みコードの下に追加。pre.sourceCode は Markmon real-time markdown preview のブラウザ表示のソースについてた class です。もしこのパッケージを使わなくなったり、うっかり jQuery の記述を消してしまったりしても、通常のスタイルで表示されるだけなので影響が少ないです。(参考:プラグイン無しでwordpressに超カンタンにシンタックスハイライトを導入する | Frog Code Works

コードやキーボードショートカットのスタイル

こんなかんじで設定しました。

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

hogehoge コードだよ! インラインのコード。

command + shift + 4spaceoption 押しながらウィンドウクリックで、ウィンドウのスクリーンショットが影なしで撮れるよ!

sunburst.css の背景を黒から紫に、余白を少し減らして、角丸を小さくして、すべての行番号を表示するように変更。キーボードの見た目はリアルフォースちゃんと同じにしてみたよ〜。ザ・自己満足。

ブログのコードがとても見やすくなったことだし、私もギットハブーになれるかな?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です