ホーム / ブログ /

Bloggerで技術ブログを書くためのカスタマイズ

2019/02/02

Blogger ブログ

こんにちは、ぐぐりら(<a href="https://twitter.com/guglilac">@guglilac</a>)です。

Bloggerでブログを書いています。

技術ブログ的な側面が大きいブログなので、コードもたくさん載せる機会がありますし、機械学習的なことも多くやっているので数式も載せたりします。

markdownに慣れているので、markdownで記事が書けると嬉しいな、という気持ちもあります。

ということで、

* markdownが使える
* シンタックスハイライトがかかる
* 数式をtex形式で書ける

あたりを実現するためにBloggerをカスタマイズしていきます。

(はてなブログでいいじゃんと言われそうですが。。。。）

## markdown
`markdown.js`っていうものがあります。
markdownをhtmlに変換するもの。

以下の記事を参考に進めました。

<div class="separator" style="clear: both; text-align: center;display:none;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MihxDYRXVI4YlqnECnCDhxw9VfNSw-YOxFah5Vm_KAKJGdtN0izY-Fmg0eaH_qusjzy2B0YpH3pDw61pVF9ZlZe_l-7PqeIOJU-InRGu828zEh6wbM1DHiIG1iyNhbdMABOOn08pcNXE/s1600/blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MihxDYRXVI4YlqnECnCDhxw9VfNSw-YOxFah5Vm_KAKJGdtN0izY-Fmg0eaH_qusjzy2B0YpH3pDw61pVF9ZlZe_l-7PqeIOJU-InRGu828zEh6wbM1DHiIG1iyNhbdMABOOn08pcNXE/s320/blogger.png" width="200" height="200" data-original-width="225" data-original-height="225" /></a></div>

BloggerでMarkdown書けるようにした。 - Qiita BloggerでMarkdownのシンタックスハイライト

`highlight.js`は言語を自動判定してくれるので便利だし、`markdown.js`が生成する
```
<pre><code></code></pre>
```
に対してハイライトをかけてくれるので相性良し。

headの終わりに以下のコードを追加することで動く。

```html

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
    <style>code{font-family:Menlo,Consolas,Courier,monospace;color:#333;background:#f8f8f8};</style>
 <style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
```
一番上の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

<script src='http://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"],
          tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                     processEscapes: true },
          "HTML-CSS": { availableFonts: ["TeX"],
                        linebreaks: { automatic: true } }
      });
  </script>
 
 ```
 
 ```html:katex

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous"/>
  <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
  <script>$(document).ready(function(){renderMathInElement(document.body,{delimiters: [{left: "$$", right: "$$", display: true},{left: "$", right: "$", display: false}]})});</script>
 ```
 
 linkのところ、閉じカッコがないと怒られるのでそこだけ注意。
 
## リンクカード

おまけに、技術ブログに限らずですが、はてなブログみたいにリンクカードでリンクを表示します。

<a href="https://embed.ly/">embedly</a>というサービスがあるのでこちらを使います。

ブックマークレットの方を使うとめちゃめちゃ簡単にリンクカードが作れて素晴らしいです。

リンクカードのデザイン(画像の有無、大きさ、説明文の有無など)も簡単にいじれるので、ありがたいです。

Embedlyで一風変わったブログカードをクリック一発で作成する方法

ぐぐりらにっき