Bloggerで技術ブログを書くためのカスタマイズ - 2月 02, 2019 こんにちは、ぐぐりら(@guglilac)です。 Bloggerでブログを書いています。 技術ブログ的な側面が大きいブログなので、コードもたくさん載せる機会がありますし、機械学習的なことも多くやっているので数式も載せたりします。 markdownに慣れているので、markdownで記事が書けると嬉しいな、という気持ちもあります。 ということで、 * markdownが使える * シンタックスハイライトがかかる * 数式をtex形式で書ける あたりを実現するためにBloggerをカスタマイズしていきます。 (はてなブログでいいじゃんと言われそうですが。。。。) ## markdown `markdown.js`っていうものがあります。 markdownをhtmlに変換するもの。 以下の記事を参考に進めました。 BloggerでMarkdown書けるようにした。 - Qiita これで、markdownで記事を書いてあげるとhtmlになってくれます。 ## シンタックスハイライト `highlight.js`をつかっています。 (`prism.js`っていうのが良さげだったけど、`markdown.js`によって生成されるコンポーネントのクラス名をいじれないとあかんのでとりあえず見送り) この記事を参考にしました。 BloggerでMarkdownのシンタックスハイライト `highlight.js`は言語を自動判定してくれるので便利だし、`markdown.js`が生成する ``` ``` に対してハイライトをかけてくれるので相性良し。 headの終わりに以下のコードを追加することで動く。 ```html ``` 一番上のcssファイル(`default.min.css`)を変更すればテーマが選べます。 (CDN版は`min`が必要) テーマ一覧はこちら。 [highlight.js/src/styles at master · highlightjs/highlight.js · GitHub](https://github.com/highlightjs/highlight.js/tree/master/src/styles) 各テーマのデモはこちら。 [highlight.js demo](https://highlightjs.org/static/demo/) ## 数式 `mathjax`を使っていましたが、`klatex`とかいうのがレンダリングが爆速らしくていいなってなったので導入しました。 どちらもheaderに追加することで動きます。 今回は`mathjax`ではなく`klatex`の方を貼り付けます。 ```html:mathjax ``` ```html:katex ``` linkのところ、閉じカッコがないと怒られるのでそこだけ注意。 ## リンクカード おまけに、技術ブログに限らずですが、はてなブログみたいにリンクカードでリンクを表示します。 embedlyというサービスがあるのでこちらを使います。 ブックマークレットの方を使うとめちゃめちゃ簡単にリンクカードが作れて素晴らしいです。 リンクカードのデザイン(画像の有無、大きさ、説明文の有無など)も簡単にいじれるので、ありがたいです。 Embedlyで一風変わったブログカードをクリック一発で作成する方法 ただ、ここの記事のとおりにembedボタンをブックマークバーに持っていってもうまく登録できませんでした。 よくわからんので、chromeの検証モードにしてembedボタンのhrefをコピーして、ブックマークバーを右クリックして新しいページを作成->URLの部分にコピーしたhrefの部分を貼り付けることでどうにかしました。 力技。。 また、markdownの中にembedlyで作ったリンクカードを入れてもうまく行かなくて困ってました。 結局、 markdownの部分を分割して、 リンクカードの部分をmarkdownの外にだしちゃえばできるんですが、なんかなあという気持ちにもなるので、何かいい方法あれば教えていただきたいです。 ## おわりに すこしずつこのブログもよくなってきているのが嬉しいです。 最初から整っているサービスを使うのもいいですが、手のかかるBloggerを育てるのもいいんじゃないでしょうか。 今後も記事を気持ちよく書けるように整備していきたいです。 この記事をシェアする Twitter Facebook Google+ B!はてブ Pocket Feedly コメント
コメント
コメントを投稿