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

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

More than 3 years have passed since last update.

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も使うようにしよう

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
ユーザーは見つかりませんでした