Maximum Blog内のMarkdownの記法解説

Maximum Blog内で使われているMarkdown Rendererの記法解説をします。

Homeブログ一覧Maximum Blog内のMarkdownの記法解説

Heading

Headingは#を使って記述します。#の数が多いほど小さい見出しになります。 右側に表示されるTOCはh1からh3までの見出しを表示します。 h1は上部に表示されるので、h2から記述するのを心がけましょう。

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
結果

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text

Bold

Boldは**で囲むことで記述できます。

**Bold**
結果

Bold

Italic

Italicは*で囲むことで記述できます。

*Italic*
結果

Italic

Strikethrough

Strikethroughは~~で囲むことで記述できます。

~~Strikethrough~~
結果

Strikethrough

Linkは[]()で記述できます。

[Link](https://github.com)
結果

Image

Imageは![]()で記述できます。

![Image](/icon.png)
結果

Image

Code(Inline)

Codeは`で囲むことで記述できます。 文章中の一部をコードとして表示したい場合に使います。

今回は`VSCode`を使っています。
結果

今回はVSCodeを使っています。

Math(Inline)

MathはTex形式に対応しており、$で囲むことで記述できます。 文章中の一部を数式として表示したい場合に使います。

時間を$t$、位置を$x$とすると、$x$は$t$の関数$x(t)$で表されます。
結果

時間をtt、位置をxxとすると、xxはttの関数x(t)x(t)で表されます。

List

Listは-で記述できます。

- List1
- List2
- List3
結果
  • List1
  • List2
  • List3

Block

Quote

Quoteは>で記述できます。 引用文を表示したい場合などに使います。

> 埼玉大学（さいたまだいがく、英語: Saitama University）は、 埼玉県さいたま市桜区下大久保255に本部を置く日本の国立大学。1873年創立、1949年大学設置。大学の略称は埼大（さいだい）。
結果

埼玉大学（さいたまだいがく、英語: Saitama University）は、 埼玉県さいたま市桜区下大久保255に本部を置く日本の国立大学。1873年創立、1949年大学設置。大学の略称は埼大（さいだい）。

Table

Tableは|で記述できます。

| Header1 | Header2 | Header3 |
| ------- | ------- | ------- |
| Cell1   | Cell2   | Cell3   |
| Cell4   | Cell5   | Cell6   |
結果
Header1Header2Header3
Cell1Cell2Cell3
Cell4Cell5Cell6

Code(Block)

Code(Block)は```で囲むことで記述できます。 このリポジトリには表現統一のためのMarkdownlintが導入されています。 そのため、Code(Block)の言語指定なしだとエラーが出ます。 txtを指定することでエラーを回避できます。

```txt
Code
```
結果
Code

またこのブログはPrism.jsが内部で使用されています。したがって Codeブロックの拡張構文が使用できます。

Language

言語を指定することで、その言語に特化したシンタックスハイライトが適用されます。

```js
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000
```
結果
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000

Line Highlight

行番号を指定することで、その行にハイライトが適用されます。

```js{2-3,6}
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000
```
結果
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000

Line Numbers

行番号を表示することができます。

```js showLineNumbers
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000
```
結果
const fib = (n) => {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(100)); // 354224848179262000000

Diff Highlight

差分を表示することができます。

```diff
- const fib = (n) => {
-   if (n <= 1) return n;
-   return fib(n - 1) + fib(n - 2);
- };
+ const memo = new Map();
+ const fib = (n) => {
+   if (n <= 1) return n;
+   if (memo.has(n)) return memo.get(n);
+   const result = fib(n - 1) + fib(n - 2);
+   memo.set(n, result);
+   return result;
+ };

console.log(fib(100)); // 354224848179262000000
```
結果
- const fib = (n) => {
-   if (n <= 1) return n;
-   return fib(n - 1) + fib(n - 2);
- };
+ const memo = new Map();
+ const fib = (n) => {
+   if (n <= 1) return n;
+   if (memo.has(n)) return memo.get(n);
+   const result = fib(n - 1) + fib(n - 2);
+   memo.set(n, result);
+   return result;
+ };

console.log(fib(100)); // 354224848179262000000

拡張構文を組み合わせる

diff-<言語名>を指定することで、差分表示とシンタックスハイライトを組み合わせることができます。

```diff-js{2-3,5,8,10} showLineNumbers
- const fib = (n) => {
-  if (n <= 1) return n;
-  return fib(n - 1) + fib(n - 2);
- };
+ const memo = new Map();
+ const fib = (n) => {
+  if (n <= 1) return n;
+  if (memo.has(n)) return memo.get(n);
+  const result = fib(n - 1) + fib(n - 2);
+  memo.set(n, result);
+  return result;
+ };

console.log(fib(100)); // 354224848179262000000
```
結果
- const fib = (n) => {
-  if (n <= 1) return n;
-  return fib(n - 1) + fib(n - 2);
- };
+ const memo = new Map();
+ const fib = (n) => {
+  if (n <= 1) return n;
+  if (memo.has(n)) return memo.get(n);
+  const result = fib(n - 1) + fib(n - 2);
+  memo.set(n, result);
+  return result;
+ };

console.log(fib(100)); // 354224848179262000000

Math(Block)

MathはTex形式に対応しており、$$で囲むことで記述できます。 レンダリングにはKaTeXが使用されています。

$$
\begin{equation}
F(x)= A_0 + \sum_{n=1}^N\left[ A_n\cos{\left(\frac{2\pi nx}{P}\right)}+B_n\sin{\left(\frac{2\pi nx}{P}\right)}\right] \notag
\end{equation}
$$
結果
F(x)=A0+∑n=1N[Ancos⁡(2πnxP)+Bnsin⁡(2πnxP)]\begin{equation} F(x)= A_0 + \sum_{n=1}^N\left[ A_n\cos{\left(\frac{2\pi nx}{P}\right)}+B_n\sin{\left(\frac{2\pi nx}{P}\right)}\right] \notag \end{equation}

Details

Detailsは:::detailsで記述できます。 折りたたみ表示したい場合に使います。

:::details[結果]
Details
:::
結果
結果

Details