LogoMark.png

Markdown の変更点


#author("2022-04-22T18:54:39+09:00","default:inoue.ko","inoue.ko")
*Markdown
https://www.markdown.jp/what-is-markdown/
~

__[[Markdown(マークダウン)>-https://ja.wikipedia.org/wiki/Markdown]]__は、文書を記述するための軽量マークアップ言語のひとつで、見出し、箇条書きなどの書式を簡単な記号を使ってプレーンテキスト形式で書くことができます。John Gruber(ジョン・グルーバー)によって2004年に[[開発・公開されました>https://daringfireball.net/projects/markdown/]]。
 Wikiの記法、READMEファイルの記述、電子メールにおいてプレーンテキストを装飾する際に使う記法などがこれと同様のものです。IT・Webの分野では・・というより、これからの社会では、情報共有に必須の「[[テクニカル・スキル>PortableSkills]]」と言えます。

-テキストエディタでプレーンテキストとして作成
-拡張子は .md
-__[[標準 Markdown のサンプル(画像データ付き)>https://github.com/koichi-inoue/MarkdownSample]]__
[[Atom]]で .md ファイルを開くと、以下の方法でプレビュー表示可能です。
 CTRL + SHIFT + m 

~

***Markdownには各種方言があります
以下、様々なMarkdown方言のマニュアルです。
-https://packetlife.net/media/library/16/Markdown.pdf (標準語)
-https://packetlife.net/media/library/17/MediaWiki.pdf  (MediaWiki方言)
-https://github.github.com/gfm/(GitHub Flavored Markdown:GFM)
-https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf(R言語)
~

***Markdownファイルを表示するには
-[[Atom]]の場合、mdファイルの編集時にカラー区分されるとともに
 CTRL + SHIFT + m 
でプレビュー表示可能です。
-Firefoxの場合、Markdown Viewer アドオンを追加
-Chromeの場合、Markdown Preview Plus 拡張を追加
~

***Markdownファイルの編集に適した環境は
使い慣れた[[テキストエディタ>TextEditor]]を利用するのが良いでしょう。
-[[Atom]]([[OpenSource]])
-[[Visual Studio Code>https://azure.microsoft.com/ja-jp/products/visual-studio-code/]]([[OpenSource]])
-[[StackEdit>https://stackedit.io/]]:オンラインのエディタです。
-[[Marp>https://yhatt.github.io/marp/]]:Markdownでスライドを作ることができます。
~
~

**記法

***見出し
行頭に「#」をつけることで、見出しに変換されます。
 # 見出し1
 ## 見出し2
 ### 見出し3
 #### 見出し4
~

***箇条書き
行頭に [ * ] / [ + ] / [ - ] のいずれかで Disc型リスト(ul)になります。
 (空行)
 * リスト項目1
 + リスト項目2
 - リスト項目3
 (空行)

行頭に [ 1 ] , [ 2 ] , [ 3 ] ...を入れるとDecimal型リスト(ol)になります。
 (空行)
 1. リスト項目1
 2. リスト項目2
 3. リスト項目3
 (空行)

以下のように ''TAB'' でインデントをとるとネストすることが可能です。
 - リスト1
   - ネスト リスト1_1
      - ネスト リスト1_1_1
      - ネスト リスト1_1_2
   - ネスト リスト1_2
 - リスト2
 - リスト3
~


***改行
以下の3つの方法があります。
-文末に半角空白スペースを2つつける
-1行空白の行を入れる
-<br>タグを使う
~

***テキスト装飾
[ * ] または [ _ ] で囲んだ範囲がイタリック体になります。
 *イタリック*
 _イタリック_

[ * ] または [ _ ] を2つ重ねて囲んだ範囲が太字になります。
 **太字**
 __太字__

[ ~ ]( チルダ)を2つ重ねて囲んだ範囲に取り消し線がつきます。
 ~~定価 1,000円~~
~

***画像
画像を掲載するには代替文字列を ![ ] で囲んだ後に、ファイルへのパスを( )で囲んで記述します(パスは当該 MDファイルから見た相対パスです)。
 ![Sample Image](images/sample.jpg)

画像をサイズ指定で表示したい場合は、HTMLタグが利用可能です。
 <img src="images/sample.jpg" width="160">
~

***表組
以下のように縦ストロークで表組が可能です。
 | LEFT    | CENTER     | RIGHT  |
 | ------- |:----------:| ------:|
 | item1   | circle     | red    |
 | item2   | triangle   | green  |
 | item3   | rect       | blue   |
~

***リンク
Markdownには インライン と リファレンス という二つのリンクスタイルと、単純にURLを書くだけの自動リンクがあります。

-インラインスタイル
リンクしたい文字列を [ ](隅カッコ)で+リンク先URLを
 [Google](http://www.google.com) 

-リファレンス
名前と番号を使って定義したリンクを参照するものです。
 * [GOOGLE][1]
 * [YAHOO][2]
 
 [1]: https://www.google.co.jp "Google"
 [2]: https://www.yahoo.co.jp "Yahoo!"

-自動リンク
単純に<>でURIを囲むと自動的にリンクになります。
 <http://www.w3.org>
~


***引用
行頭に [ > ] で引用になります。複数行にまたがる場合 各行に [ > ]。
 >やまとうたは、人の心を種として、万の言の葉とぞなれりける。
 >世の中にある人、ことわざ繁きものなれば、心に思ふことを、
 >見るもの聞くものにつけて、言ひ出せるなり。
~

***ソースコードブロック
[ ` ](バッククォート)を使うと、HTML, CSS などのコードの表示が可能です。複数行にわたる場合は、三連バッククォート [ ``` ] で挟むように記述します。
&small(この記号は [ ' ](シングルクォート)ではありません。[SHIFT]+[@] で出ます。 );
 `<h1>Sample</h1>`
 
 ` ` `
 <div>
   <p>Sample Text</p>
 </div>
 ` ` `
~

***数式表現
__[[LaTeX]]__ の表現に対応したものであれば、数式表現も可能です。  
例えば、GoogleColab では以下の方法で数式が書けます。

-インライン形式| $・・$で囲む
 2次方程式 $ ax^2+bx+c=0 \quad ( a \neq 0 ) $ の解は
2次方程式 &mathjax(ax^2+bx+c=0 \quad ( a \neq 0 ));の解は

-ブロック形式|$$・・$$で囲む
 $$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$
#mathjax(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a})

''参考''
-MathJax:https://www.mathjax.org/
LaTeX の数式をウェブブラウザ上で表示する JavaScript ライブラリ
-TexMe: https://github.com/susam/texme
Markdown と LaTeX のレンダリングに対応した JavaScript ライブラリ

~
~

**APPENDIX

***Markdown Viewer
.md ファイルの Drag&Dropで Markdownのプレビューが可能です。
-DEMO:https://koichi-inoue.github.io/MarkdownViewer/
-CODE:https://github.com/koichi-inoue/MarkdownViewer
~

***サンプルデータ
-View:https://github.com/koichi-inoue/MarkdownSample/blob/main/sample.md
-Files:https://github.com/koichi-inoue/MarkdownSample
~

***関連記事
-[[XMLHttpRequest]]
Markdownを JavaScript で読み込んで表示するサンプル
~


~
~