Markdown Preview for VRT

1
import { Image } from "../../components/Image";
2

3
<Image alt="me" src="/images/meta/me.png" width={40} height={40} />

1
![me](/images/meta/me.png)

1
| foo | bar |
2
| --- | --- |
3
| 1   | 1   |
4
| 2   | 2   |

1
::: columns
2

3
<div className="bg-amber-100">左側のコンテンツ</div>
4

5
---
6

7
<div className="bg-cyan-100">右側のコンテンツ</div>
8

9
:::

1
::: columns 2:1 lg
2

3
<div className="bg-cyan-100">幅広のコンテンツ (2)</div>
4

5
---
6

7
<div className="bg-amber-100">狭いコンテンツ (1)</div>
8

9
:::

1
::: columns 1:2 sm
2

3
![me](/images/meta/me.png)
4

5
---
6

7
::: code-group
8

9
\`\`\`ts [add.ts] {"2": 2}
10
export function add(): number {
11
return 1 + 1;
12
}
13
\`\`\`
14

15
\`\`\`js [add.js]
16
export function add() {
17
return 1 + 1;
18
}
19
\`\`\`
20

21
:::
22

23
:::

1
::: tree
2

3
- pages
4
  - index.tsx
5
  - about.tsx
6
- components
7
  - Button
8
    - index.tsx
9
    - styles.css
10
  - Card
11
    - index.tsx
12
    - styles.css
13

14
:::

1
\`\`\`sh
2
$ echo "hello world"
3
\`\`\`

1
\`\`\`ts collapse={4-6}
2
// foo.ts
3
const foo = "foo";
4
export function getFoo() {
5
return foo;
6
}
7
\`\`\`

1
\`\`\`powershell title="PowerShell terminal example"
2
Write-Output "This one has a title!"
3
\`\`\`

1
\`\`\`js title="line-markers.js" del={2} ins={3-4} {6}
2
function demo() {
3
console.log("this line is marked as deleted");
4
// This line and the next one are marked as inserted
5
console.log("this is the second inserted line");
6

7
return "this line uses the neutral default marker type";
8
}
9
\`\`\`

1
\`\`\`diff lang="js"
2
export function add() {
3
- return 1 + 1;
4
+ return 2;
5
}
6
\`\`\`

1
\`\`\`js "given text"
2
function demo() {
3
// Mark any given text inside lines
4
return "Multiple matches of the given text are supported";
5
}
6
\`\`\`

1
\`\`\`js "return true;" ins="inserted" del="deleted"
2
function demo() {
3
console.log("These are inserted and deleted marker types");
4
// The return statement uses the default marker type
5
return true;
6
}
7
\`\`\`

1
::: code-group
2

3
\`\`\`ts [add.ts] {"2": 2}
4
export function add(): number {
5
  return 1 + 1;
6
}
7
\`\`\`
8

9
\`\`\`js [add.js]
10
export function add() {
11
  return 1 + 1;
12
}
13
\`\`\`
14

15
\`\`\`html [index.html]
16
<div>
17
  <p>HTML code</p>
18
  <p>HTML code</p>
19
</div>
20
\`\`\`
21

22
\`\`\`css [style.css]
23
body {
24
  background-color: #fff;
25
}
26
\`\`\`

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

1
> [!TIP]
2
> Optional information to help a user be more successful.

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

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

1
> [!CAUTION]
2
> Negative potential consequences of an action.

1
::: details Click to see code
2

3
hi!
4

5
:::

1
import { GoogleSlidesCard } from "../../mdx/components/GoogleSlidesCard";
2

3
<GoogleSlidesCard id="2PACX-1vTW6FYDrDsP-KDNZFS0wdpWxI-ePyk_EwVV4XbxYy3skbKsyxyG_3U6Yr_tYdFZkxIBohEIrVyCgvme" />

1
[youtube](https://www.youtube.com/watch?v=9AjkUyX0rVw)

1
[x](https://x.com/about_hiroppy/status/1453525169293520901)

1
[personal site](https://hiroppy.me)