70
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

BloggerでMarkdown書けるようにした。

Last updated at Posted at 2015-07-15

Markdownめっちゃ良い。

さいきん、Qiitaに初投稿してみました。

kimonolabsの使い方 基礎編

実は、Markdownで何か書く体験も、これが初めてだったりします。
めっちゃ良いです。気に入りました。

ということでbloggerでMarkdownで書けるようにしてみました。
ちなみに以下の記事を参考にしました。

Blogger で Markdown 記法で投稿する方法

え、何でqiitaでやんないかって?
はてなでやれ?
まぁ、そういうなって。

bloggerテンプレートhtmlの編集

まずは、bloggerのテンプレートHTMLを編集します。

スクリーンショット_0027-07-15_17_35_15.png

MarkdownからHTMLに変換することで、実現するので変換スクリプトをHTMLに埋め込みます。
参考記事と同様、marked.js を使用することにしました。
以下のjavascriptを</body>の直前にコピペします。

template
<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>

スクリーンショット_0027-07-15_17_37_50.png

CSSの追加編集

次にbloggerのCSSの追加編集をします。

スクリーンショット_0027-07-15_17_35_15.png

カスタマイズの、

スクリーンショット_0027-07-15_17_54_52.png

上級者向けの、CSSを追加に以下のCSSを追加します。

.markdown  {
  width:100%;
  height:auto;
  overflow:scroll;
  background-color:#ffffff; 
}
.showdown {
  background-color:#ffffff
}
.showdown img {
  height:auto;
  width:100%;
}

background-color:#ffffff;は設定している背景色に合わせると良いと想います。

投稿

あとは投稿画面のHTML記述のほうで、

<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">

# test1

</textarea>

として<textarea>タグの中にMarkdownで記述していけばokです。
プレビューができないので、そこだけは不便かもしれない。

試しに、qiitaのMarkdownをそっくりそのままコピペしたのが、下記の記事になります。
kimonolabsの使い方 基礎編(blogger)

*ちなみにcssのimgを設定しているのは、そのままだと大きな表示なってしまうからだったりします。画像URLがqiitaのままなので元サイズでるのが当然でした。

Tips:投稿テンプレートの設定

bloggerは投稿テンプレートの設定ができるので設定しておくと次回以降が楽です。

設定の、投稿とコメントの設定から投稿テンプレートを設定できます。

Blogger__her0m31_s_blog__-_投稿とコメントの設定.png

おわり

bloggerも使うようにしよう

70
53
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?