← Back

monica-dev.comがサポートしているMarkdownの記法

デザイン確認の意味も込めて当サイト(monica-dev.com)がサポートしている Markdown の記法をまとめてみました。

Paragraphs

日本は北緯 35 度から 45 度の範囲に位置し、東経 122 度から 153 度の範囲に位置しています。日本列島は、北海道、本州、四国、九州などの大小の島々からなり、その総面積は約 37 万 8 千平方キロメートルです。

Japan is located in the range of 35 to 45 degrees north latitude and 122 to 153 degrees east longitude. The Japanese archipelago consists of large and small islands such as Hokkaido, Honshu, Shikoku, and Kyushu, with a total area of about 378,000 square kilometers.

日本は北緯35度から45度の範囲に位置し、東経122度から153度の範囲に位置しています。日本列島は、北海道、本州、四国、九州などの大小の島々からなり、その総面積は約37万8千平方キロメートルです。

Japan is located in the range of 35 to 45 degrees north latitude and 122 to 153 degrees east longitude. The Japanese archipelago consists of large and small islands such as Hokkaido, Honshu, Shikoku, and Kyushu, with a total area of about 378,000 square kilometers.

Headings

H2

H3

H4

## H2

### H3

#### H4

Lists

Unordered

  • Item 1
  • Item 2
    • Item 2.1
      • Item 2.1.1
      • Item 2.1.2
    • Item 2.2
  • Item 3
- Item 1
- Item 2
  - Item 2.1
    - Item 2.1.1
    - Item 2.1.2
  - Item 2.2
- Item 3

Ordered

  1. Item 1
  2. Item 2
    1. Item 2.1
      1. Item 2.1.1
      2. Item 2.1.2
    2. Item 2.2
  3. Item 3
1. Item 1
2. Item 2
   1. Item 2.1
      1. Item 2.1.1
      2. Item 2.1.2
   2. Item 2.2
3. Item 3

This is a link. The format is below.

This is a [link](https://www.google.com). The format is below.
https://www.google.com
<https://www.google.com>

Images

とてもかっこいい、夜の幻想的な風景画像

![とてもかっこいい、夜の幻想的な風景画像](/assets/blogs/markdown/image.webp)

Video

![動画](/assets/works/tetris-ai/NN6-infinity.mp4)

Blockquotes

JavaScript(ジャバスクリプト)は、プログラミング言語であり、HyperText Markup Language(HTML)やCascading Style Sheets(CSS)と並ぶ World Wide Web(WWW)の中核技術の一つである。

https://ja.wikipedia.org/wiki/JavaScript
> JavaScript(ジャバスクリプト)は、プログラミング言語であり、HyperText Markup Language(HTML)やCascading Style Sheets(CSS)と並ぶ World Wide Web(WWW)の中核技術の一つである。

Code Blocks

This renderer supports Shiki for syntax highlighting.

Language Specified

function mandelbrot(c, maxIterations) {
  let z = 0;
  let n = 0;
  while (Math.abs(z) <= 2 && n < maxIterations) {
    z = z * z + c;
    n++;
  }
  if (n === maxIterations) {
    return maxIterations;
  }
  return n + 1 - Math.log(Math.log2(Math.abs(z)));
}

This is a code block.

```javascript
function mandelbrot(c, maxIterations) {
  let z = 0;
  let n = 0;
  while (Math.abs(z) <= 2 && n < maxIterations) {
    z = z * z + c;
    n++;
  }
  if (n === maxIterations) {
    return maxIterations;
  }
  return n + 1 - Math.log(Math.log2(Math.abs(z)));
}
```

Highlight Line Notation

import { Hono } from "hono";
import { compress } from "hono/compress"; 

const app = new Hono();

app.use(compress()); 

app.get("/", (c) => c.json({ message: "Hello, World!" }));

export default hono;

This is a code block.

```ts
import { Hono } from "hono";
import { compress } from "hono/compress"; // [!code highlight]

const app = new Hono();

app.use(compress()); // [!code highlight]

app.get("/", (c) => c.json({ message: "Hello, World!" }));

export default hono;
```

Diff Line Notation

import { Hono } from "hono";
import { compress } from "hono/compress"; 
import { etag } from "hono/etag"; 

const app = new Hono();

app.use(compress()); 
app.use(etag()); 

app.get("/", (c) => c.json({ message: "Hello, World!" }));

export default hono;

This is a code block.

```ts
import { Hono } from "hono";
import { compress } from "hono/compress"; // [!code --]
import { etag } from "hono/etag"; // [!code ++]

const app = new Hono();

app.use(compress()); // [!code --]
app.use(etag()); // [!code ++]

app.get("/", (c) => c.json({ message: "Hello, World!" }));

export default hono;
```

Tables

NameBrowserManaged by
V8ChromeGoogle
SpiderMonkeyFirefoxMozilla
ChakraEdgeMicrosoft
JavaScriptCoreSafariApple
| Name           | Browser | Managed by |
| -------------- | ------- | ---------- |
| V8             | Chrome  | Google     |
| SpiderMonkey   | Firefox | Mozilla    |
| Chakra         | Edge    | Microsoft  |
| JavaScriptCore | Safari  | Apple      |

Horizontal Rules


---

Text Modifiers

This is bold and this is italic and this is code and this is strikethrough.

This is **bold** and this is _italic_ and this is `code` and this is ~~strikethrough~~.

Footnotes

This is a paragraph with a footnote1.

This is a paragraph with a footnote[^1]

[^1]: This is a footnote.

Task Lists

  • Task 1
  • Task 2
    • Task 2.1
    • Task 2.2
    • Task 2.3
  • Task 3
- [x] Task 1
- [ ] Task 2
  - [x] Task 2.1
  - [ ] Task 2.2
  - [ ] Task 2.3
- [ ] Task 3

Block Math

L(θ)=Est,atD[12(Qϕ(st,at)(rt+γ(1dt)Eat+1πθ[Qϕ(st+1,at+1)αlogπθ(at+1st+1)]))2]+EstD[Eatπθ[Qϕ(st,at)+αlogπθ(atst)]]\begin{aligned} \mathcal{L}(\theta) &= \mathbb{E}_{s_t, a_t \sim \mathcal{D}} \left[ \frac{1}{2} \left( Q_{\phi}(s_t, a_t) - (r_t + \gamma (1 - d_t) \mathbb{E}_{a_{t+1} \sim \pi_{\theta}}[Q_{\phi'}(s_{t+1}, a_{t+1}) - \alpha \log \pi_{\theta}(a_{t+1} | s_{t+1})]) \right)^2 \right]\\ &+ \mathbb{E}_{s_t \sim \mathcal{D}} \left[ \mathbb{E}_{a_t \sim \pi_{\theta}}[-Q_{\phi}(s_t, a_t) + \alpha \log \pi_{\theta}(a_t | s_t)]\right] \end{aligned}
$$
\begin{aligned}
\mathcal{L}(\theta) &= \mathbb{E}_{s_t, a_t \sim \mathcal{D}} \left[ \frac{1}{2} \left( Q_{\phi}(s_t, a_t) - (r_t + \gamma (1 - d_t) \mathbb{E}_{a_{t+1} \sim \pi_{\theta}}[Q_{\phi'}(s_{t+1}, a_{t+1}) - \alpha \log \pi_{\theta}(a_{t+1} | s_{t+1})]) \right)^2 \right] \\
&+ \mathbb{E}_{s_t \sim \mathcal{D}} \left[ \mathbb{E}_{a_t \sim \pi_{\theta}}[-Q_{\phi}(s_t, a_t) + \alpha \log \pi_{\theta}(a_t | s_t)] \right]
\end{aligned}
$$

Inline Math

Qϕ(st,at)Q_{\phi}(s_t, a_t)は状態sts_tと行動ata_tに対する行動価値関数を表し、πθ(atst)\pi_{\theta}(a_t | s_t)は状態sts_tにおける行動ata_tの確率を表します。

$Q_{\phi}(s_t, a_t)$は状態$s_t$と行動$a_t$に対する行動価値関数を表し、$\pi_{\theta}(a_t | s_t)$は状態$s_t$における行動$a_t$の確率を表します。

Alert

NOTE
Highlights information that users should take into account, even when skimming.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

IMPORTANT
Crucial information necessary for users to succeed.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

WARNING
Critical content demanding immediate user attention due to potential risks.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

Flex Block

This is a flex block

Image

This is a flex default block
The default is center

Timeline

timeline 1

This is a timeline content

timeline 2

You can insert any content you like.

timeline 3

This feature is useful for displaying a list of items in chronological order.

timeline 4

For example, competition logs, progress reports, etc.

::::timeline

### [12/01] timeline 1

This is a timeline content

### [12/02] timeline 2

You can insert any content you like.

### [12/03] timeline 3

This feature is useful for displaying a list of items in chronological order.

### [12/04] timeline 4

For example, competition logs, progress reports, etc.

::::

Mentions

@sor4chi
@sor4chi
@sor4chi
@sor4chi

t@sor4chi
twitter@sor4chi
g@sor4chi
github@sor4chi

Embed

Youtube

::youtube[FmZQF8BpEhc]

Details

This is a details block

You can put any content you like here.

:::details[This is a details block]
You can put any content you like here.
:::

Footnotes

  1. This is a footnote.

Copy URL
Source
Share X

Home Works Timeline Blogs Slides