# Strapdown.js [Strapdown.js](https://strapdownjs.com/) を用いて Markdown→HTML 変換表示しました。 いくつかのテーマを適用できます。非適用にはできません。 ここではオリジナル版を採用していますが、現在は派生も多数存在しています。 テーマは次のページで一覧表示し、切り替え表示できます。 [Strapdown.js テーマ | md2html.pages.net.eu.org](strapdown-js-themes/) Hugo を採用している [Markdown|ふうせん🎈 Fu-sen.](https://balloon.asia/markdown/) を編集しました。 [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/) ___ ## 段落 ``` 間に空白行があると 段落になります。 ``` 間に空白行があると 段落になります。 ___ ## 見出し ``` # 見出し 1 ## 見出し 2 ### 見出し 3 #### 見出し 4 ##### 見出し 5 ###### 見出し 6 ``` # 見出し 1 ## 見出し 2 ### 見出し 3 #### 見出し 4 ##### 見出し 5 ###### 見出し 6 GitHub Pages でテーマを適用していない場合は、 見出し 2~6 はこの URL へのリンクが付加されます。 h1・h2 はこの記述もできます。 ``` 見出し1 ======== 見出し2 -------- ``` 見出し1 ======== 見出し2 -------- `{#見出し}` を入れる事で、リンク先の名称を明記する事もできます。 ``` ### 見出し {#head} ``` ### 見出し {#head} zero-md では v2 でも機能せずに表示されます。 ___ ## 太字(bold・強い強調) HTML 上は「強い強調」ですが、ここでは主な表示である「太字(Bold)」と記載します。 ``` ここを **太字** にします。 これでも __太字__ にできます。 ``` ここを **太字** にします。 これでも __太字__ にできます。 ``` 前後に空白がない場合でも**bold**は機能しますが、 こちらの__bold__は機能しません。 ``` 前後に空白がない場合でも**bold**は機能しますが、 こちらの__bold__は機能しません。 日本語では `**~**` を使うのが無難でしょう。 ___ ## 斜体(Italic・強調) HTML 上は「強調」ですが、ここでは主な表示である「斜体(Italic)」と記載します。 ``` ここが *Italic* になります。 これでも _Italic_ になります。 日本語フォントでは *機能しない* 場合があります。 ``` ここが *Italic* になります。 これでも _Italic_ になります。 日本語フォントでは *機能しない* 場合があります。 日本語では使わないのが無難でしょう。 ___ ## 太字+斜体 上 2 種類の強調をあわせた状態です。 ``` その1 ***bold + Italic*** その2 **_bold + Italic_** その3 __*bold + Italic*__ その4 ___bold + Italic___ 日本語では ***太字だけ*** の場合があります。 ``` その1 ***bold + Italic*** その2 **_bold + Italic_** その3 __*bold + Italic*__ その4 ___bold + Italic___ 日本語では ***強調だけ*** の場合があります。 ___ ## 引用 ``` > 引用の例です。 > > この中で **太字** なども使えます。 > > > 引用の中に引用もできます。 ``` > 引用の例です。 > > この中で **太字** なども使えます。 > > > 引用の中に引用もできます。 HTML の特殊記号 &gt; → &amp;gt; 変換の影響でうまく動作しない場合があります。 ___ ## 箇条書き(数字) ``` 1. 1つ目の項目 1. 2つ目の項目 1. 3つ目の項目 ``` もちろん `1.` `2.` `3.` … としても構いません。番号は自動付加されます。 `1.` のみなどの固定した数字ににすると、 途中に追加する場合でも他の項目を変更する必要がありません。 ``` 1. 1つ目の項目 2. 2つ目の項目 3. 3つ目の項目 ``` 1. 1つ目の項目 1. 2つ目の項目 1. 3つ目の項目 ___ ## 箇条書き(固定) ``` - 1つ目の項目 - 2つ目の項目 - 3つ目の項目 ``` `-` 以外に `+` や `*` も使用できます。 - 1つ目の項目 - 2つ目の項目 - 3つ目の項目 ___ ## 箇条書き(共通事項) ``` - 項目を具体的に説明するために このようにして説明する事もできます。 プログラムなどは頭へ空白 4 文字を 更に追加して入れます。 - 項目のつづきです。 ``` - 項目を具体的に説明するために このようにして説明する事もできます。 プログラムなどは頭へ空白 4 文字を 更に追加して入れます。 - 項目のつづきです。 ___ ## コード(code) ``` 文中にコードを入れる時は `code` とします。 ``` 文中にコードを入れる時は `code` とします。 コード内は変換されません。 `https://md2html.pages.net.eu.org/` のように自動リンクさせたくない URL の表示にも使えます。 ___ ## 水平線 ``` --- ``` --- 3 文字以上が有効です。 `***` や `___` も使用できます。 また、システムにより `- - -` や `* * *` または `_ _ _` も使用できます。 ___ ## リンク ``` [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/) ``` [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/) リンク先は間接表記も可能です。 ``` [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/ "md2html.pages.net.eu.org") ``` [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/ "md2html.pages.net.eu.org") 上のリンク部分にカーソルを当ててみて下さい。 ``` <https://md2html.pages.net.eu.org/> のように URL へのリンクもできます。 ``` <https://md2html.pages.net.eu.org/> のように URL へのリンクもできます。 ``` システムによって https://md2html.pages.net.eu.org/ のように自動リンク化する場合もあります。 ``` システムによって https://md2html.pages.net.eu.org/ のように自動リンク化する場合もあります。 ___ ## 画像 ``` ![ふうせん🎈 Fu-sen.](/balloon.png) ``` ![ふうせん🎈 Fu-sen.](/balloon.png) 画像は直接表記も可能です。 ``` ![ふうせん🎈 Fu-sen.](/balloon.png "ふうせん🎈 Fu-sen.") ``` ![ふうせん🎈 Fu-sen.](/balloon.png "ふうせん🎈 Fu-sen.") 画像にカーソルを当ててみて下さい。 ___ ## エスケープ(無効化) ``` 変換させたくない場合は \`このように\` \ を付けます。 ``` 変換させたくない場合は \`このように\` \ を付けます。 英語フォントでは 半角 `\` ですが、 日本語フォントではキャラクターコードの定義により、半角 `\` と 半角 `¥` の場合があります。 ___ ここから下の内容はシステムによって採用されていない事があります。 zero-md でも一部採用されていません。 ___ ## 強制改行 強制改行についてはシステムによって実装が異なります。 ``` GitHub や Hugo などは これでも改行できます。 ``` GitHub や Hugo などは これでも改行できます。 上は分かりにくいですが、改行前・行末に半角スペースが 2 つです。 ``` GitHub のソースや Hugo などは\ これで改行できます。 ``` GitHub のソースや Hugo などは\ これで改行できます。 Strapdown.js では改行しません。 ``` HTML タグを入れて<br> 改行できる場合もあります。 ``` HTML タグを入れて<br> 改行できる場合もあります。 ``` システムによってはこのまま 改行できる場合もあります。 ``` システムによってはこのまま 改行できる場合もあります。 Strapdown.js では改行しません。 ___ ## 表(table) ``` |見出し|見出し|見出し| |------|:----:|-----:| |内容 | 内容 | 内容| |内容 | 内容 | 内容| ``` 見出し と 内容 の間にある `---` は 3 文字以上です。 `:` の付加により、中央寄せ・右寄せを指定できます。 空白は省略できます。見やすさのために付加できます。 ``` |見出し|見出し|見出し| |------|:----:|-----:| |内容|内容|内容| |内容|内容|内容| ``` |見出し|見出し|見出し| |------|:----:|-----:| |内容|内容|内容| |内容|内容|内容| ___ ## Code ブロック 行単位で ` ```~``` ` を囲んだところが有効です。 Code プロック内は変換されず、そのまま表示されます。 <div class="language-plaintext highlighter-rouge"><pre class="highlight"><code>\`\`\` 10 INPUT A 20 INPUT B 30 C=A+B 40 PRINT C 50 END \`\`\`</code></pre></div> ``` 10 INPUT A 20 INPUT B 30 C=A+B 40 PRINT C 50 END ``` 言語や形式を入れる事ができます。 システムにより Syntax Highlight などで表示が変化します。 <div class="language-plaintext highlighter-rouge"><pre class="highlight"><code>\`\`\`json { "firstName": "John", "lastName": "Smith", "age": 25 } \`\`\`</code></pre></div> ```json { "firstName": "John", "lastName": "Smith", "age": 25 } ``` ___ ## 脚注 ``` md2html.pages.net.eu.org [^1] [^1]: https://md2html.pages.net.eu.org/ ``` md2html.pages.net.eu.org [^1] [^1]: https://md2html.pages.net.eu.org/ `1` は任意の文字でも構いません。共通の文字にします。 Strapdown.js ではリンクで動作します。 ___ ## 別記載のリンク リンク URL を文章とは別にまとめて記載する事ができます。 Markdown の中でもこの説明がされている事は少ないですが、 オリジナルの Markdown(Markdown.pl)で採用されている機能です。 ``` ここから [トップページ][1] へ移動します。 [1]: https://md2html.pages.net.eu.org/ "md2html.pages.net.eu.org" ``` ここから [トップページ][1] へ移動します。 [1]: https://md2html.pages.net.eu.org/ "md2html.pages.net.eu.org" ___ ## 定義 ``` 定義 : 説明1 : 説明2 ``` 定義 : 説明1 : 説明2 Strapdown.js では対応していません。 ___ ## 取り消し線 ``` ここに ~~取り消し線~~ が入ります。 ``` ここに ~~取り消し線~~ が入ります。 ___ ## タスクリスト ``` - [x] 完了 - [ ] 未完成 ``` - [x] 完了 - [ ] 未完成 日本ではピンとこないのですが、 ☑ = ☒ なのです。 Windows 3.1 とか知っている人ならば…… Strapdown.js では対応していません。 ___ ## HTML ``` システムによって <strong>HTML</strong> もそのまま使えます。 ``` システムによって <strong>HTML</strong> もそのまま使えます。 Hugo は Hugo 0.60 より HTML を有効にするためには config に追加が必要です。 config.toml の場合は次を加えます。 ``` [markup.goldmark.renderer] unsafe = true ``` ___ [md2html.pages.net.eu.org](https://md2html.pages.net.eu.org/) Presented by [ふうせん🎈 Fu-sen.](https://jpn.balloon.im/) 🎈😍