BloggerでMarkdownを書けるように設定

独自ドメインを取得しましたが、 [はてなブログ](http://hatenablog.com/)で独自ドメインを設定する場合、有料プランしかありませんでした。 以前はてなブログに移行した理由として、[Markdown](https://ja.wikipedia.org/wiki/Markdown)が使用できるというのが主な理由だったため、 無料で独自ドメインを設定出来るBloggerで、[Markdown](https://ja.wikipedia.org/wiki/Markdown)で書けるのなら、元に戻してもいいのかなと思い、試しに設定してみました。 <a name='more'></a> ## 設定方法 ### Markdown変換スクリプトを設定 1. Blogger管理画面からテーマを選択 2. HTMLの編集を選択し、表示されたコードの`</body>`タグの下に下記を貼り付ける ``` <script src='https://rawgithub.com/chjj/marked/master/lib/marked.js'/> <script> var mdEls = document.querySelectorAll('.markdown'); for(var i in mdEls){ var mdEl = mdEls[i]; var converted = document.createElement('div'); converted.innerHTML = marked(mdEl.value); mdEl.parentNode.replaceChild(converted, mdEl); } </script> ``` 3. テーマを保存 ### カスタムCSSを設定 1. Blogger管理画面からテーマを選択 2. カスタマイズを選択し、上級者向けを選択 3. 一番下までスクロールし、CSS を追加を選択 4. カスタムCSSを追加に下記を貼り付ける ``` .markdown { width:100%; height:auto; overflow:scroll; background-color:#ffffff; } .showdown { background-color:#ffffff } .showdown img { height:auto; width:100%; } ``` 5. ブログに適用 ### モバイル適用 1. Blogger管理画面からテーマを選択 2. テーマ › モバイル テーマの選択から、"はい。モバイル端末でモバイル テーマを表示する。 "を選択 3. モバイル テーマの選択のプルダウンからカスタムを選択 4. 保存 ## 投稿方法 1. 新しい投稿 2. 作成からHTMLを選択 3. 下記タグで挟んでmarkdown文章を保存※LESS-THAN SIGNは<に置き換え ``` LESS-THAN SIGNtextarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled" style="height: 301px; margin: 2px; width: 580px;"> Markdown文章 LESS-THAN SIGN/textarea> ``` 4. 公開 ## 確認環境 * Google Chrome 60.0.3112.78 * Safari iPhone7 iOS 10.3.2 ## メリット/デメリット ### メリット * Markdownで投稿出来るので、ルールに沿えばそれなりの見た目の記事が作成出来る * 下書きを書く際など、Markdown対応の他のアプリとの親和性が高くなる ### デメリット * 投稿方法の作成で見た目を確認しながら書けない * marked.jsがなくなった場合、表示される書式が変換される前のものになる * MarkdownからHTMLへの変換時、一瞬変換前の画面が見える時がある ### 対応 marked.jsは自分でダウンロードするなどの管理をすれば対応でき、確認はプレビューボタンを押して見れば対応出来る。 一瞬変換前の画面が見える時があるのは諦めます。。 ## 参考 * [BloggerでMarkdown書けるようにした。](http://qiita.com/her0m31/items/1804bdc251a647e0e9a8)