マークダウン・プラグインMarked.jsの導入

Bloggerに開設したこのブログに、マークダウン・プラグインMarked.jsを導入しました。 --- 僕は、日頃、技術的なメモを、VSCode上で、マークダウン形式で作成しています。 ブログ投稿記事も同じように作成し、できるだけそのままで、Bloggerに投稿できるようにしたいと思い、マークダウン・プラグインMarked.jsを導入することにしました。 以下、その作業記録です。 <a name='more'></a> --- ## 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - マークダウン・エディタ：VSCode（1.33.1） - マークダウン拡張機能：Markdown All in One（2.2.0） ## やりたい投稿手順 大まかには、以下のような手順で投稿できるようにしたいと思って、導入しました。 1. VSCode上で、マークダウン形式で投稿テキストを作成する。 2. 作成したテキストを、基本的にコピー＆ペーストで、Bloggerに投稿する。 - Bloggerの投稿作成画面では、HTML形式欄で入力する。 - 単純なコピー＆ペーストで対応できない部分は一括置換で対応できるようにする。 - ただし、画像リンクについては、いろいろ便利なBloggerの機能を利用する。 --- ## marked.js導入手順 「[Qiita：BloggerでMarkdown書けるようにした。](https://qiita.com/her0m31/items/1804bdc251a647e0e9a8) 」[1]を参考に、以下の手順で導入しました。 1. marked.jsプラグインのコードを追加。 1. 「ダッシュボード」-「テーマ」から、「HTMLの編集」ボタンをクリック。 2. HTMLソースのテキストボックス内で、Ctrl+fで検索ボックスを立ち上げて、`</body>`を検索。 3. `</body>`タグの直前に以下のコードを追加。 ``` javascript <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> ``` 4. 「テーマの保存」をクリックして、保存する。 2. マークダウン用CSSソースの追加 1. 「ダッシュボード」-「テーマ」から、「カスタマイズ」ボタンをクリック。 2. 「Blogger テーマ デザイナー」-「上級者向け」-「CSSの追加」をクリック。 3. 「カスタム CSS を追加」欄に以下のCSSコードを入力。 ``` css .markdown { width:100%; height:auto; overflow:scroll; background-color:#ffffff; } .showdown { background-color:#ffffff } .showdown img { height:auto; width:100%; } ``` 4. 「ブログに適用」ボタンをクリックして、追加ソースを適用する。 3. 投稿テンプレートの登録 1. 「ダッシュボード」-「設定」-「投稿、コメント、共有」をクリック。 2. 「投稿」-「投稿テンプレート」のテキスト欄に以下のテキストを入力。 ``` html <textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled"> # test1 </textarea> ``` 投稿するときは、`<textarea>`タグ内に（上のソースで`# test1`となっている個所）にマークダウン形式テキストを入力する。 3. 「設定を保存」をクリックして、保存する。 ## 導入時のトラブル - [`</textarea>`を含んだコードブロックがあるとレイアウトが崩れる](https://logospathos-techlog.blogspot.com/2019/04/httpswww.html) - トップページの投稿リストで、それぞれの投稿の全文が表示される。 - 投稿テキスト内に、`<!-- more -->`を追加すれば、「続きを読む」が表示され、投稿の一部だけが表示されるようになる。 - モバイル表示では、全文がテキスト入力のまま。 - [カスタマイズしたテーマをモバイル表示に適用する必要がある](https://logospathos-techlog.blogspot.com/2019/04/blogger_37.html) - マークダウン形式テキストが参照していたローカルの画像ファイルは、もちろん表示されない。画像付き投稿の手順をまとめる必要がある。 ## 参考 - [1] : [Qiita：BloggerでMarkdown書けるようにした。](https://qiita.com/her0m31/items/1804bdc251a647e0e9a8) --- ## 今後の課題 * [ ] 画像ファイルのアップロードから画像リンクの修正手順をまとめる。 --- ## 更新履歴 2019-04-24 新規作成