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

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

- 2月 02, 2019

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で一風変わったブログカードをクリック一発で作成する方法

コメント