Help us understand the problem. What is going on with this article?

Qiitaの記事をBloggerに移す方法

More than 1 year has passed since last update.

はじめに

最近Qiitaの数式レンダリングが崩れてしまったので、一時的に数式の多い記事をBloggerへ移すことにした。一方で、BloggerはQiitaのようにMarkdownによる投稿ができない。この記事はQiitaのMarkdownで書かれた記事をなるべくそのままPandocでHTMLへ変換しBloggerへ投稿する方法を述べる。
なお、この記事で利用したプログラムは下記のリポジトリから入手できる。

なお、この記事はQiitaとBloggerにそれぞれ投稿されている。

2/27 追記

数式レンダリングの不具合は解消したようである。

Bloggerの準備

MathJaxの導入

BloggerはデフォルトではMathJaxが使えないため、テーマを編集してMathJaxを導入する。次をテンプレートのどこかに入れればよい。

<script type='text/x-mathjax-config'>
  MathJax.Hub.Config({
    extensions: [&quot;tex2jax.js&quot;],
    jax: [&quot;input/TeX&quot;, &quot;output/HTML-CSS&quot;],
    tex2jax: {
      inlineMath: [ [&#39;$&#39;,&#39;$&#39;], [&quot;\\(&quot;,&quot;\\)&quot;] ],
      displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&quot;\\[&quot;,&quot;\\]&quot;] ],
      processEscapes: true
    },
    &quot;HTML-CSS&quot;: { availableFonts: [&quot;TeX&quot;] }
  });
</script>
<script async='' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML' type='text/javascript'></script>

highlight.jsの準備

コードハイライティングにはhighlight.jsを使うことにした。これもテーマに次を足せばよい。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

Twitter Cardsの準備

Twitter Cardsも入れたかったので、次をテーマに足した。

<meta content='summary' name='twitter:card'/>
<meta content='@_yyu_' name='twitter:site'/>
<meta content='@_yyu_' name='twitter:creator'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:if cond='data:blog.pageName == &quot;&quot;'>
    <meta expr:content='data:view.title' name='twitter:text:title'/>
<b:else/>
    <meta expr:content='data:blog.pageName' name='twitter:text:title'/>
</b:if>

@_yyu_となっているところは、適宜自分のTwitter IDに置き換えてほしい。

Pandocの準備

PandocはmacOSならばhomebrewから次のように導入できる。

$ brew install pandoc

pandocfilitersのインストール

また、pandocfiltersというPython製のライブラリも利用するため、pipで次のようにインストールする。

$ pip install pandocfilters

冒頭のGitHubリポジトリを利用する場合は、pyenvvirtualenvを利用して次のようにしてもよい。

$ cd /path/to/blogger-markdown/git-repository
$ pyenv virtualenv 2.7.10 blogger-markdown
$ pyenv local blogger-markdown
$ pip install -r requirements.txt

Qiita記事のダウンロード

Qiitaの記事はURLの末尾に.mdを付けることでMarkdownソースコードを得ることができる。ただし、冒頭に記事のタイトルが付与されており、これはPandocによる変換においては不要なためsedを利用して次のようにする。

$ curl https://qiita.com/yyu/items/efcf471ce9b97e885957.md | sed -e '1d' > articles/quantum_gacha.md

このようにして変換元のMarkdownソースコードが得られる。

HTMLへの変換

Pandocを利用して次のようにする。

$ pandoc -f markdown_github+footnotes+header_attributes-hard_line_breaks -t html --mathjax --filter ./filters/code.py articles/guantum_gacha.md -o docs/quantum_gacha.html

ただし./filters/code.pyは次のようなプログラムである。

./filters/code.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os
from pandocfilters import toJSONFilter, CodeBlock, RawBlock, Str, RawInline

def mkMathBlock(code):
    return RawBlock('html', "\\[\n" + code + "\n\\]")

def mkCodeBlock(classes, code):
    code = code.replace('<', '&lt;').replace('>', '&gt;')
    if (len(classes) == 0):
        return RawBlock('html', "<pre><code>" + code + "</code></pre>")
    else:
        c = (classes[0].split(':'))[0]
        return RawBlock('html', "<pre><code class=\"" + c + "\">" + code + "</code></pre>")

def filter(key, value, fmt, meta):
    if key == 'CodeBlock':
        [[ident, classes, kvs], code] = value
        if 'math' in classes:
            return mkMathBlock(code)
        else:
            return mkCodeBlock(classes, code)

if __name__ == "__main__":
    toJSONFilter(filter)

このプログラムは次の2つを行っている。

  • コードブロックのプログラムがmathである場合、MathJaxとしてHTMLを出力する
  • コードブロックがその他である場合、プログラムとしてHTMLを出力する

このようにしてQiitaのmathコードブロックを適切にHTMLへ変換する。

Bloggerへの投稿

最後に出力されたHTMLをコピーして投稿する。ただし記事のタイトルは手動でQiitaから持ってくる。

まとめ

このようにすることで、Qiitaの資産をBloggerへ移行することができる。ただ、Qiitaにはたくさんの思い出があるので数式レンダリングの不具合をなるべく早めに修正してほしい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした