マークダウン記法

この記事では、Lantanaで使用できるマークダウン記法の一覧を示します


taiseiue | 2022-10-22

普通のテキスト

そのまま記述可能です。

Lantanaは、シンプルで軽量なMKDocsのテーマです。
HTMLの知識がなくても簡単にサイトを作成できます。

改行するには、一行空行を挟みます。
結果

Lantanaは、シンプルで軽量なMKDocsのテーマです。 HTMLの知識がなくても簡単にサイトを作成できます。

改行するには、一行空行を挟みます。

エスケープ

マークダウンで意味のある文字(たとえば、*や#など)をテキストとして表示するには、エスケープが必要です。

\*\#\!\`\\

結果

*#!`\

明示的な空行

二行以上にわたって改行したい場合など、一部の場合ではHTMLの<br/>タグを使用します。

<br/>

コメント

記事にコメントを記述する方法はHTMLと同じです。ビルド時に削除されます。

<!-- this is a comment. -->

見出し

Hタグを生成します。記事にタイトルが指定されていない場合、自動的に記事の一番最初の見出しがタイトルになります。

また、見出しは目次にも表示されます。

# これはH1タグになります
## これはH2タグになります
###### これはH6タグになります
結果

これはH1タグになります

これはH2タグになります

これはH6タグになります


テキストの装飾

文章を様々に装飾する方法をまとめて紹介します。

_ か * で囲むとHTMLのemタグになり、 *このように* 表示されます。

__ か ** で囲むとHTMLのstrongタグになり、**このように** 表示されます。

それらを組み合わせることもできます。*** で囲むと、***このように*** 表示されます。

~~ で囲むと打消し線になり、 ~~このように~~ 表示されます。

^^ で囲むと下線がつき、^^このように^^ 表示されます。

== で囲むとハイライトがつき、==このように== 表示されます。

~ で囲むと下付き文字になり、使用すると~このように~表示されます。

^ で囲むと上付き文字になり、使用すると^このように^表示されます。

++ で囲むと++ctrl+alt+del++のようにキーボードのキーを表現できます。

また、`print("Hello,World!");`と記述することでコードをインライン表示できます。
_ か * で囲むとHTMLのemタグになり、 このように 表示されます。

__ か ** で囲むとHTMLのstrongタグになり、このように 表示されます。

それらを組み合わせることもできます。*** で囲むと、このように 表示されます。

~~ で囲むと打消し線になり、 このように 表示されます。

^^ で囲むと下線がつき、このように 表示されます。

== で囲むとハイライトがつき、このように 表示されます。

~ で囲むと下付き文字になり、使用するとこのように表示されます。

^ で囲むと上付き文字になり、使用するとこのように表示されます。

++ で囲むとCtrl+Alt+Delのようにキーボードのキーを表現できます。

また、print("Hello,World!");と記述することでコードをインライン表示できます。

脚注

対応バージョン:>=2.8

[^1]のように文章の任意の場所に脚注へのリンクを設置すると、ページの末尾の説明へ移動します。 説明は文章中の任意の場所で[^1]: <説明>とすることで記述できます。

そのころわたくしは、モリーオ市の博物局に勤めて居りました。
十八等官 [^1]でしたから役所のなかでも、ずうっと下の方でしたし俸給[^2]もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。

[^1]: ロシア帝国では、軍隊、政府、および宮廷における地位と階級を**[官等表](https://en.wikipedia.org/wiki/Table_of_Ranks)**と呼ばれるもので管理していました。
[^2]: 役所や会社に務める人の給料のことを指す言葉です。

結果

そのころわたくしは、モリーオ市の博物局に勤めて居りました。 十八等官1 でしたから役所のなかでも、ずうっと下の方でしたし俸給2もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。

コードブロック

``` で囲むことでコードとして認識され、初めを```言語名 とすることでシンタックスハイライトがつきます。title="タイトル"とすることでファイル名なども表現できます。

``` csharp title="Program.cs"
using System;

public class Program
 {
    public static void Main()
     {
            Console.WriteLine("Hello World!");
     }
 }
 ```

結果

Program.cs
using System;

public class Program
 {
    public static void Main()
     {
            Console.WriteLine("Hello World!");
     }
 }

hl_lines属性を指定すると、特定の行を強調表示できます。

```csharp title="AnimalClasses.cs" hl_lines="6 20"
public class Animal
{
    public string Name { get;set; }
    public string Description { get;set; }

    public virtual void Move()
    {
        throw new NotImplementedException();
    }
}

public class Cat : Animal
{
    public Cat()
    {
        this.Name = "たま";
        this.Description = "吾輩は猫である。名前も決まっている。";
    }

    public override void Move()
    {
        /// ひっかく
    }
}
 ```

結果

AnimalClasses.cs
public class Animal
{
    public string Name { get;set; }
    public string Description { get;set; }

    public virtual void Move()
    {
        throw new NotImplementedException();
    }
}

public class Cat : Animal
{
    public Cat()
    {
        this.Name = "たま";
        this.Description = "吾輩は猫である。名前も決まっている。";
    }

    public override void Move()
    {
        /// ひっかく
    }
}

注意

テーブルのデザインや一貫性の問題から、linenums=1属性はLantana2.0から非推奨になりました。

インラインコードのハイライト

対応バージョン:>=2.12

`:::language code`

と書くことで、インラインコードにもシンタックスハイライトを適用できます。

Markdown
Pythonでモジュールを読み込むには、`:::py3 import`文を使います。
例えば、`sys`モジュールを読み込むには、`:::py3 import sys`と書きます。

結果

Pythonでモジュールを読み込むには、import文を使います。 例えば、sysモジュールを読み込むには、import sysと書きます。

数式

\$\$で囲むことでTeX記法を用いて数式を記述できます。

$$
\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}
$$
結果

\[ \operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}} \]

$または\(...\)で囲むことで、数式を文中に埋め込むこともできます。

ディッフィー・ヘルマン鍵共有プロトコルでは、まず大きな素数 ${\displaystyle p}p$ と、
${\displaystyle p-1}p-1$ を割り切る大きな素数 ${\displaystyle q}q$ を用意します。
また、 ${\displaystyle g}g$ を
${\displaystyle ({\mathbb {Z} }/p{\mathbb {Z} })^{\ast }}{\displaystyle ({\mathbb {Z} }/p{\mathbb {Z} })^{\ast }}$ の元で、
位数が ${\displaystyle q}q$ である値とします。
この ${\displaystyle p,q,g}{\displaystyle p,q,g}$ の値は公開されているものとします。
結果

ディッフィー・ヘルマン鍵共有プロトコルでは、まず大きな素数 \({\displaystyle p}p\) と、 \({\displaystyle p-1}p-1\) を割り切る大きな素数 \({\displaystyle q}q\) を用意します。また、 \({\displaystyle g}g\)\({\displaystyle ({\mathbb {Z} }/p{\mathbb {Z} })^{\ast }}{\displaystyle ({\mathbb {Z} }/p{\mathbb {Z} })^{\ast }}\) の元であり、位数が \({\displaystyle q}q\) である値とします。この \({\displaystyle p,q,g}{\displaystyle p,q,g}\) の値は公開されているものとします。

順序なしリスト

リストの上には空行が必要です。

* 文頭に"*"、"+"、"-"のいずれかを入れると順序なしリストになります
+ 記号のあとには**スペースが必要**です
- 同じリストでは同じ記号を使うことを推奨します。
結果

  • 文頭に"*"、"+"、"-"のいずれかを入れると順序なしリストになります
  • 記号のあとにはスペースが必要です
  • 同じリストでは同じ記号を使うことを推奨します。

番号付きリスト

リストの上には空行が必要です。

1. 文頭に"数字."を入れると番号付きリストになります。
1. "数字."のあとには**スペースが必要**です
1. すべての数字を1にすると、自動的に番号が付きます。
結果

  1. 文頭に"数字."を入れると番号付きリストになります。
  2. "数字."のあとにはスペースが必要です
  3. すべての数字を1にすると、自動的に番号が付きます。

タスクリスト

順序なしリストの記述の後ろに[ ]を入れるとチェックボックスが生成されます。 また、チェックが入った状態のボックスを生成する場合は[x]を入力します。

- [ ] タスク1
- [x] タスク2
結果

  • タスク1
  • タスク2

水平線

---
結果


URL

Urlやメールアドレスを書くだけで、自動的にリンクになります。

https://lantana.wsoft.ws

[email protected]
結果

https://lantana.wsoft.ws

info@wsoft.ws

リンク

このサイト外へのリンクは新規タブで開かれます。

[リンク](about:blank)

[WSOFT](https://wsoft.ws/)
結果

リンク

WSOFT

タイトル付きリンク

タイトルはリンクをホバーした時に表示されます。

[リンク](about:blank "タイトル")
結果

リンク

リンクの使いまわし

[link]: about:blank
[ここ][link]と[ここ][link]は同じになります。
結果

ここここは同じになります。

また、linkという書き方もできます。

画像

![代替テキスト](https://wsoft.ws/products/Alice.jpg)

結果

代替テキスト

Bootstrapの制約により、ヘッダーでは左右中央揃えが適用されません

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

結果

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

引用

> 文頭に>を置くことで引用になります。
> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
> 
> 引用の中に別のMarkdownを使用することも可能です。
> 
> > これはネストされた引用です。
結果

文頭に>を置くことで引用になります。 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。

引用の中に別のMarkdownを使用することも可能です。

これはネストされた引用です。

図形

Lantanaは規定でmermaid.jsをサポートします。mermaid.jsを使うと、複雑な図形を簡単に挿入できます。

対応バージョン:>=2.9

バージョン2.9以降では、MermaidPrecompile拡張機能の導入するか、Mermaid.jsのCDNmkdocs.yml内でextra_javascriptとして読み込む必要があります。PreCompileを行うにはビルド時に、CDNを読み込むには使用者に、インターネット接続が必要です。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

結果

A

B

C

D

アラート

目を引く形で説明したい場合、!!! 種類 "タイトル"で囲みます。

!!! note "メモ"
    `note`で使用できる装飾です。[リンク](#)は自動的に適切な色になります。
結果

メモ

noteで使用できる装飾です。リンクは自動的に適切な色になります。

Abstract

abstractで使用できる装飾です。リンクは自動的に適切な色になります。

Info

infoで使用できる装飾です。リンクは自動的に適切な色になります。

Tip

tipで使用できる装飾です。リンクは自動的に適切な色になります。

Success

successで使用できる装飾です。リンクは自動的に適切な色になります。

Question

questionで使用できる装飾です。リンクは自動的に適切な色になります。

Warning

warningで使用できる装飾です。リンクは自動的に適切な色になります。

Failure

failureで使用できる装飾です。リンクは自動的に適切な色になります。

Danger

dangerで使用できる装飾です。リンクは自動的に適切な色になります。

Bug

bugで使用できる装飾です。リンクは自動的に適切な色になります。

Example

exampleで使用できる装飾です。リンクは自動的に適切な色になります。

Quote

quoteで使用できる装飾です。リンクは自動的に適切な色になります。

折り畳み要素

折り畳みを使用するには、??? タイトルで囲みます。

??? "ポラーノの広場"
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
    またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

結果

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

記事一覧

= "" =で囲い、その中にディレクトリを指定すると、そのディレクトリの記事一覧を出力します。

= "cheatsheet" =\

スニペットの埋め込み

--8<--で囲い、その中にファイル名を書き込むと、そのファイルを埋め込みます。

--8<--
snippet.md
--8<--

HTMLの埋め込み

HTMLコードは、そのまま記述することで埋め込むことができます。

<h4>これはHTMLのH4タグです</h4>
結果

これはHTMLのH4タグです

属性の追加

{: 属性名}とするとマークダウンで生成される要素に特定の属性を追加することができます。

### この要素にはqueryというIdがつきます {: #query }
結果

以下のようなHTMLが生成されます

HTML
<h3 id="query">この要素にはqueryというIdがつきます</h3>


  1. ロシア帝国では、軍隊、政府、および宮廷における地位と階級を官等表と呼ばれるもので管理していました。 

  2. 役所や会社に務める人の給料のことを指す言葉です。