久しぶりにこのサイトをいじってました。というより、最近記事の作成にTyporaを使いだしました。今までVS codeでMarkdownを書いていましたが、Typoraを教えてもらってからはTypora一本です。便利すぎる。
そんなところで、TyporaでMarkdownを書いて、そのままWordpressにぶん投げる環境を作りたくなりました。
正確には、
- MarkdowonをWordpressにそのまま投げれる
- ハイライトとシンタックスハイライトに対応させる
この2点がやりたかったことです。
目次
1.WP Githuber MD
WordPressにMarkdwonで書いた文をそのまま投稿する時、そのままではうまくいかないのでプラグインを導入する必要があります。
私は今までJetpackのMarkdownブロックを使っていましたが、GFM(GitHub Flavored Markdown)で書いた場合うまく表示されないことがあったので、新しくプラグインを導入しました。
いろいろなプラグインがありますが、開発が続いてて使いたい機能があり、Live Preview機能があるという点で、WP Githuber MDがいいと思いました。
注意点としては、設定をする際、あるタブの設定をいじったら一番下の「設定を保存」をクリックしてからでないと他のタブをいじれないことです。
あとは好きに設定を弄るといいです。
ただし、私の環境ではModules内のSyntax Highlightがprism.jsにしてもhighlight.jsにしてもうまく動かなかったので、別のプラグインでprism.jsを動作させています。
2.ハイライトとシンタックスハイライト
やりたかったことは、次の画像のようなデザインにすることでした。
関数名の部分をハイライト、コードの部分をシンタックスハイライトしようとしました。
ハイライト
まずはハイライトについて。こちらはTyporaでは設定から拡張ができて、==(any text)==で表されます。ハイライト自体はプラグインでできるものと思ってましたが、テーマによって表示される表示されないがあったため、テーマの変更ではなく、追加CSSで対応することにしました。
ハイライトはHTMLに変換すると<code></code>に対応されます。そのため、以下のようなCSSを追加しました。
code {
background: #e6e6e6;
font-size: 100%;
font-weight: 700;
}これでテーマに依らずハイライトされるようになりました。もうちょっと太めのほうがいいので後で修正します。
シンタックスハイライト
シンタックスハイライトはプラグインで解決しました。今までは、SyntaxHighlighter Evolvedを用いていましたが、色々あってプラグインの変更に踏み切りました。今回導入したプラグインはPrism For WPです。このプラグインは最終更新日が結構昔ですが、Prism.js自体はプラグインを使わなくても導入できるので、気になる人はPrism.js自体を導入してみてください。
Prism For WPを導入したら終わりと思いきや、問題発生。ハイライトで追加したCSSがこちらにも反映されます。結果、背景が茶色になるという自体に。シンタックスハイライト部分はHTMLだと<pre><code>any code</code></pre>となっているので、この部分はCSSを解除するCSSを付け足します。
pre code{
background: initial;
font-size: initial;
font-weight: initial;
}先程設定したものをすべて解除しています。
参考:http://www.shurey.com/html/css_initial.html
以上でやりたかったことを実現させました。もっといい方法あるかもしれませんが、HTML/CSSやWeb関係に全く詳しくない私の力ではこれが精一杯でした。