マークダウン:::記法｜困ったこと｜ｍｄ


マークダウンでいくつかの記事を編集しましたが、あっという間に元に戻しました。

しかし、折角たくさん調べた後なのでやってみたい人のためにコピペ出来る方法を残します。

元に戻した理由は以下にあります。私と同じくあまり詳しくない人に・・、参考になりましたら幸いです。

　

１：　困った話｜アンカーリンクとは｜マークダウン形式の実験

「’（アポストロフィー）」が「＆＃３９；」になってしまい、何度やっても「’」で保存されていない 記法を色々試すと反映されている部分もありました。 
 結局は「＆＃39；」のままですが、
プレビューでマークダウン形式になっていたので良しとしました。
  • アンカーリンクとは、記事内のメニューのことです。
  • ハイパーリンクは対語で外部サイトへのリンクです。

　

２： 原因の１つと思わしき事

- 上記の「’（アポストロフィー）」の問題と同じく、記号を出すために何度か打ってしまったものが残っている可能性
（以前、ズーム２００倍とかにしないと見えない記号が重なっていた事があったという。
（例：バッククォート「‘」　やマクロン「　¯　」伸ばし記号の半角など）
確認したところ今回は違いますが、記号を探していて思い出した話です。） 

 - htmlとCSSでも未だ何かあるかもしれませんので、調整中です。 
 因みに、画像の挿入も以下に例を置いておきます。ｂｌｏｇｇｅｒの場合です。上手くできていませんでした。

３：　blogger仕様が推奨されている

　アンカーリンクや画像の表示について、あまり調子が良くないのですが、blogger仕様が推奨されている・・というだけかもしれません。（至極当たり前のことですが・・）
 画像については、画像の部分だけマークダウンではなく通常の編集にするなどしたりしています。（マークダウンの表示ではアイキャッチになりませんでした。） 
 普通はＶＳＣｏｄｅ使う方が多いみたいです。 
 「はてな」などでも記法が独特だそうで、どこを参考にしても統一されてはいないというかブログサービスに依って どこでも多少なりとも違っているので･･
コピペや真似ばかりしていても同じ方法では何かしら出来ないので結局は調べています。

 ### 後日追記： 上記で触れましたが、記事内リンク（アンカーメニュー）がリンクされていた筈だったのですが、 後で見るとリンク出来ておらず。
原因が分かりませんけど・・お見苦しくて申し訳ございません。 
 「このブログ内でお探しのページは存在しません。」というページになったりしていますが、 どうやら「ｊｓ」とかで上手く出来るみたいですね。
自分は今直ぐには無理そうなので保留しますが、 いろいろ試して加筆編集していきます。

　

４：　マークダウンのチートシート（ミニ）｜元に戻した理由

以下のようにhtmlのタグも使えます。 
  •  - 下線は＜ｕ＞文字＜／ｕ＞ 
  •  - 訂正線は＜ｓｔｒｉｋｅ＞文字＜／ｓｔｒｉｋｅ＞ 

 元に戻した理由（後で分かったこと）：

　bloggerでマークダウンへ画像を挿入したものは、記事一覧のページでアイキャッチ画像にはならない様です。 html式だと、いつもの通りアイキャッチになりました。そのため、
  • 画像の挿入に関してはbloggerは逆にひと手間増えている、元々のプレビュー編集が一番楽にできる 
  • 他のリンクも貼り付け作業や改行での半角ｘ２とかも細かいのにプレビューが出来ない。（一旦は公開しないと視認性がない。）
  • そして、コピペなどすると必ず数ヶ所は思った様になっていないので何度も直して「手間がかからなくて楽」とは思えなくなった。
  • アンカーリンクは結局、反映されないことが多い（飛んだり飛ばなかったり）
  • 「ｓｃｒｉｐｔタグが危険」とか目に入って急に不安になったので調べたらややこしいので勉強が必要。今すぐは無理なので数か月かかりそう。「そこまでして使う意味ない」と、止めることにしました。

# ｍａｒｋｅｄ。ｊｓについて
コピペで出来ると喜んで使いましたが、ＸＳＳ対策というものが必要で 設定しておかないとスクリプトが埋め込まれる可能性があるのだそうです・・

 止める理由や危険だという話を並べておいてなんですが・・。以下にブロガーでの使い方です。

　　

５：コピペなどはこの下にあります


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

＜／ｂｏｄｙ＞直前へ以下をコピペ（テーブルとか後で勉強して追加します！）  
  
 <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>




  引き続き、テーマの編集でhtml編集部分の少し上の方へ  
  ＣＳＳの部分に以下をコピペ（自分は＜／ｈｅａｄ＞の直前くらいに下のほうへ入れました）  


     /*   マークダウン用

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

.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">
<!--　ここに本文　-->
 
 </textarea>


最後に、画像の貼り方（ブロガーで出来た方法）
  

  ![画像が表示されなかった時に表示される文字列][blogger]
 
[blogger]:画像のＵＲＬ～～．ｊｐｇ（pngとかgifなどお好きなものを）


これで、画像の表示も出来ました。  

お疲れ様でした。



これらの方法は、10年くらい前のブロガーさんの以下の記事から分かったものです。  
しかも、Githubなどの外部で編集されているみたいでした。でも、ブロガーでも使えて良かったです。  
参考になり助かりました。ありがとうございました。  

[Jupyter Notebookに画像を表示させる方法](https://p--q.blogspot.com/2015/10/jupyter-notebook.html #Jupyter Notebookに画像を表示させる方法)  
[ページ内リンクが動作しない場合の対処方法（https://daisuke20240310.hatenablog.com/entry/anchorlink #スペースやピリオド「.」などを含む場合）](ページ内リンクが動作しない場合の対処方法（スペースやピリオド「.」などを含む場合）)



　記事内のメニューを付けるのに色々試しているのですが、
今のところ毎回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)マークダウンで記事が書けるようにする　p--qhttps://p--q.blogspot.com/2021/11/blogger2.html

Jupyter Notebookに画像を表示させる方法
https://p--q.blogspot.com/2015/10/jupyter-notebook.html

ーーーここと

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

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

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

　－－－ここと

Qiitahttps://qiita.com › Yarakashi_Kikohshi › items › af0b334af1a1e73a5661 Markdown のアンカーリンクを理解したい - Qiita


コメント

コメントを投稿

読んでくださって、ありがとうございます。お気軽にコメントして頂けると嬉しいです。返事は９０％くらいお返ししますが、めちゃくちゃ遅い場合があります。気長にお待ちください。

このブログの人気の投稿

Linux::自分でインストーラー作りたい｜VentoyとRufusはどちらが良い？｜ＤＶＤドライブ（Ｆ）｜
イメージ
　rufusを使う際、ldlinux.sys、ldlinux.bssというファイルが足りない件で 対処しようとしても更に困ったことがあったので覚書しておきます。 ここでは「正しい作り方」は怪しいので、詳しい手順は他のサイト（qiita）とか見た方がいいです。 このサイトは殆ど「こんな事があった」という話が中心です。 　Linuxあるあるですが、数日経ったら大丈夫なのでは？と思い確かめてみたかったので、 後日（10日ほど経ってから）やってみると大丈夫でした。。 という経験談と、たまたま出来た素人情報の調べた事もついでに残しています。 参考になりましたら幸いです。 目次 　　 １：　Ｒｕｆｕｓで困った事｜ファイルが不足する原因について ２：　調べた方法について： ３：　さらに困った事とは 　　 ４：　ＤＶＤドライブ（Ｆ）削除について ５：　VentoyとRufus、どちらが良いのか 　　　 ６：　Ｌｉｎｕｘのinstallする時、自分でインストーラを作りたい ７：　参考・終わり １：　Ｒｕｆｕｓで困った事｜ファイルが不足する原因について 　Ｒｕｆｕｓで困ったことですが、最初に先ず 「ldlinux.sys」、「ldlinux.bss」というファイルがなかったのです。。 原因は、おそらく ldlinux.sys、ldlinux.bssというファイルが足りないということで、 画面では表示が出ており、ネットで調べても説明の通りにすれば自動でダウンロードするものだそうですが、 自分は勘違いして「いいえ」を押してしまった様でした （記憶が定かではない・・が、散々調べてそれしか上手くいかない原因の心当たりがない）。 インストールしたいパソコン（便宜上、新ＰＣと呼びます）にインストールは進んで アカウント名・パスワードなどの登録までしたものの・・。 ＯＳが開いたスタート？デスクトップ画面が出ないし。 isoファイルを開いてしまったので隈なく何度も探したけど、、ldlinux.sys、ldlinux.bssというファイルはどこにもない。 何度か、やり直してバージョンを...
Read more »

JW－CAD::レイヤが消えた！「反転表示」を戻す方法
イメージ
　あせりました・・。 　JW-cadで作図していた際に、レイヤを確認していて 今まで作成していた図の一部が急に消えた事があります。 その時に原因をたまたま見つけたので、解決法を探すことが出来ました。 折角なので、備忘録として残します。 （間違っていた＆役に立たない場合、すみませんというか・・。） 目次 １：　原因：反転表示 　 ２：　事の発端・困った状態　　 　 ３：　解決した方法 　 ４：　原因のまとめ 　 ５：　参考サイト：　 　 １：　 原因：反転表示 図の一部が急に消えた事について。 いろいろ調べた結果、レイヤが消えてなくなった訳ではなく レイヤーの反転表示となっていたということが判明。 反転していると、例えばですが、 白い画面に「白い文字」・・なので見えなくなります。 それが分かるまではレイヤの番号を１つ１つ見たり、 全表示にしてみたり レイヤを色々と触って探していると、 ○や×を触った瞬間に元の図が見え隠れし、 画面の左上に「レイヤ反転表示中」という文字が表示されたのでした。 　 ２：　事の発端・困った状態 　JW-cadで作図中に、レイヤを確認していたら 今まで作成していた図の一部が急に消えました。 そのあと直ぐに確認したこと。 レイヤの番号ボタンの下や端っこに 「○」や「×」のマークのボタンがあります。 ○をクリックすると×の記号メニューは全て消え （もう一度クリックすると元に戻り） ×をクリックすると画面の左上に 「レイヤ反転表示中」という文字が表示され、 「反転表示」となっている・・ということが分かりました。 しかし、元へ戻す方法が分からない・・。   早速その、反転表示を元に戻す方法をネット検索しました。 文字編集も少し関係があるということらしいです。   ３：　解決した方法 以下の方法で反転表示は解除される模様です。   「Ctrl」キーを押しながら、×の付いたレイヤボタンをクリックすると プロテクト解除出来ます。 Jw-cadの公式サイトのヘルプページからの情報です。 ありがとうございました。 日頃より大変お世話になっております。 　 ４：　原因のまと...
Read more »

エラー::安全ではありません｜混在コンテンツのブロック｜クラッシュについて｜
イメージ
　firefoxでウェブサイトを見ていたら   「プロトコル用のプログラムとして追加しますか？」   という内容のウィンドウがたまに出るのですが、意味が分からないので調べました。AIによる一般的な判断は、 「何か支障が出ているなら追加すると改善する可能性がありますが、 特に何の支障もなければ何もする必要はありません。」 とのことでした。 他にも似たような（分からなかった）話をまとめました。 目次 　　 １：　画像をスマホからアップロードしていた時 　 ２：　「安全ではありません」というエラー 　 ３：　moz://a firefoxで、混在コンテンツのブロック・クラッシュについて 　 ４：　「https」なのに、「安全ではありません」とは。。　 ５：　参考・終わりに 　　　 　 １：　画像をスマホからアップロードしていた時 　以下、原因が分かった覚書です・・。結論先にありきで「拡張機能」の問題でした。 以前は画像をスマホからアップロードしていたのですが、その時に偶々気付いたことです。 そのせいか画像は「https：//〜」ではない「http://〜」のＵＲＬになっていました。 他、アフィリエイトでscriptタグのものも画像ｕｒｌが https://ではありませんでした。 それらを全て外してみたかったのですが、結構大変なので後日またいつか。。。 以下、解決前の話が殆どの愚痴みたいなものですが、グチを読みたくない方は、 ２：　「安全ではありません」というエラー へ、どうぞ。 私はあまり詳しくないのですが、このサイトはＳＳＬ適用になっています。 それなのに何故か 「このサイトは安全ではありません」とかいう表示があり 気になってしまい、あちこちで確認して回りました。 「検証され信頼できる運営者情報はありません」など 自分のサイトが怪しく感じられてしまうのではないかと気になる・・ので、 先ず、firefoxのヘルプみたいなところへ行き、 混在コンテンツのブロック」では、 灰色の錠前アイコンにオレンジ色の警告アイコンが付く場合、Firefox は画像のような安全でないパッシブコンテンツをブロックしていません。既定 では、Firefox は、パッシ...
Read more »