マークダウンファイル:::開き方｜メモ帳｜ｍｄ

<!-- ここに Markdown 記法で記述するとプレビュー時に変換される --> ## ｂｌｏｇｇｅｒ内でのマークダウン形式の書き方　 　今まで難しいもの・特別なソフトが必要・費用も掛かるのでは･･と思っていたのですが、 いつも利用しているbloggerもマークダウンの仲間なのでは？（htmlも同類だそうなので） じゃあ、もしかすると意外に簡単に使えるかも･･と思い、急に使ってみたくなり調べました。 [markdownファイルの開き方](https://tentakak.blogspot.com/2020/03/blog-post_30.html#title1 "#title1") [どうやって使うのか](https://tentakak.blogspot.com/2020/03/blog-post_30.html#title2 "#title2") [困った話](https://tentakak.blogspot.com/2020/03/blog-post_30.html#title3 "#title3") [メコピペはこの下にあります](https://tentakak.blogspot.com/2020/03/blog-post_30.html#title4 "#title4") ## <a name="title1">１：　markdownファイルの開き方　　</a> -今まで大体、ソフトをダウンロードするとか拡張機能（アドオン）などのツールが必要だという説明しか見なかったのですが、 　閲覧にはメモ帳で開けていたので特に不便もありませんでした。ずっと必要性も全く感じなかったのですが、 使ってみるととても楽かも知れません。 一応、開くだけなら メモ帳（ｔｘｔふぁいると同じ様に）の他、 ワードパッド・ｗｏｒｄ・ブラウザでも普通に開けますが、markdown式で表示されず普通のテキスト方式のメモでした。 マークダウン方式で表示したい場合、 -ＶＳＣｏｄｅも良いそうです。 -「拡張機能を追加」するとブラウザでエディターとして閲覧が見易く出来る様ですね。 -たまたま目についた名前ですが、「Stackedit」などというものなどがありました。 ## <a name="title2">２：　どうやって使うのか　</a> マークダウン方式で文書を作成・表示したい場合、上記と重複しますが -ＶＳＣｏｄｅや -「拡張機能を追加」するとブラウザでエディターとして使えます（例：「Stackedit」など） 偶々、bloggerで使っているという人の記事を見たので以下のようにして使えます。 （コピペで使えるように残します。下の方を見てください。） ## <a name="title3">３：　困った話　</a> 「’（アポストロフィー）」が「＆＃３９；」になってしまい、何度やっても「’」で保存されていない 記法を色々試すと反映されている部分もありました。 結局は＆＃39；のままですが、プレビューでマークダウン形式になっていたので良しとしました。 ## <a name="title4">４：　コピペはこの下にあります　</a> <!-- ここに Markdown 記法で記述するとプレビュー時に変換される -->

　先ずはテーマ＞　カスタマイズ＞HTML編集の画面の一番下の方の

＜／ｂｏｄｙ＞直前へ以下をコピペ

    <script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>

<script>

  const mdEls = document.querySelectorAll('.markdown');

  for (let i in mdEls) {

    const mdEl = mdEls[i];

    const converted = document.createElement('div');

    converted.innerHTML = marked.parse(mdEl.value);

    mdEl.parentNode.replaceChild(converted, mdEl);

  }

</script>

ＣＳＳの部分に以下をコピペ

      /*   マークダウン用

---------------------------------------------------------------------------- */

.markdown  {

  width:100%;

  height:auto;

  overflow:scroll;

  background-color:#ffffff; 

}

.showdown {

  background-color:#ffffff

}

.showdown img {

  height:auto;

  width:100%;

}

記事の本文の部分に以下をコピペ

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

  <!-- ここに Markdown 記法で記述するとプレビュー時に変換される -->

# test1　

<!--　

＃１つは一番大きい文字、

＃６つは一番小さい文字で＜ｈ１＞の見出しの様にできます。

->

</textarea>

　記事内のメニューを付けるのに色々試しているのですが、

今のところ毎回URLを指定しないと出来ません。

簡単な記法などがあれば追記します。

終わり｜参考：

　ずっと難しくてソフトやプログラミング言語の必要な大変なものだと思い込んでいましたが、

やってみて良かったです。ソフトのＤＬしなくても使えて助かりました。

　他の人が「文書がスッキリする」「楽」などと仰って勧められている気持ちが分かりました。

ここまで読んでいただきありがとうございました。

いかがでしたでしょうか。何か少しでも参考になれば嬉しい限りです。

良かったら気が向いた時にでもまた覗いてやってくださいませ。

よろしくお願い致します。

参考：

【初心者向け】Markdown記法の基本と活用テクニック｜簡単にキレイな文書を作成！
https://www.choge-blog.com/programming/markdown/

ーーーここと

Google Blogger でマークダウンとシンタックスハイライトを使えるようにする
https://manymanyuni.blogspot.com/2025/03/google-blogger.html

【令和最新版】Blogger で Markdown を用いて記事を書く方法
https://qiita.com/wk8oor/items/267ea5ad4f8c120eaeb8

　－－－ここと

【初心者向け】Qiitaでよく使うMarkdownの記法チートシート
https://qiita.com/FlatBone/items/a7159a28a47cc9ece4cc

BloggerでMarkdown書けるようにした。https://qiita.com/her0m31/items/1804bdc251a647e0e9a8

　－－－ここと

Markdown で Blogger の記事を書く
https://kuttsun.blogspot.com/2017/06/markdown-blogger.html

Bloggerテーマの作成(2)マークダウンで記事が書けるようにする

https://p--q.blogspot.com/2021/11/blogger2.html

様々なブラウザやテキストエディタでMarkdownを表示させる

https://qiita.com/C_HERO/items/194d477475f3a7f49a85

Markdown で Blogger の記事を書く -へっぽこプログラマーの備忘録 https://kuttsun.blogspot.com › 2017 › 06 › markdown-blogger.html

　－－－ここと