Markdown Usages

Here you can find syntaxes and example usages according to the criteria we have set to contribute.

Links

Both internal and external links gets special treatments.

External Links

https://senchabot.app

https://senchabot.app

Here our cool [website](https://senchabot.app)

Here our cool [website](https://senchabot.app)

Here our cool website

Internal Links

Internal links are converted to router link for SPA navigation. Also, every index.md contained in each sub-directory will automatically be converted to index.html, with corresponding URL /.

For example, given the following directory structure:

.
├─ index.md
├─ foo
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ index.md
   ├─ three.md
   └─ four.md

.
├─ index.md
├─ foo
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ index.md
   ├─ three.md
   └─ four.md

And providing you are in foo/one.md:

[Home](/) <!-- sends the user to the root index.md -->
[foo](/foo/) <!-- sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- anchors user to a heading in the foo index file -->
[bar - three](../bar/three) <!-- you can omit extension -->
[bar - three](../bar/three.md) <!-- you can append .md -->
[bar - four](../bar/four.html) <!-- or you can append .html -->

[Home](/) <!-- sends the user to the root index.md -->
[foo](/foo/) <!-- sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- anchors user to a heading in the foo index file -->
[bar - three](../bar/three) <!-- you can omit extension -->
[bar - three](../bar/three.md) <!-- you can append .md -->
[bar - four](../bar/four.html) <!-- or you can append .html -->

Badge

The badge lets you add status to your headers.

html

### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="BETA" />
### Title <Badge type="warning" text="NEW" />
### Title <Badge type="danger" text="caution" />

### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="BETA" />
### Title <Badge type="warning" text="NEW" />
### Title <Badge type="danger" text="caution" />

Code above renders like:

custom element custom element

Title BETA

Cool NEW feature NEW

Pre-Alpha pre-alpha

Custom Containers

Custom containers can be defined by their types, titles, and contents.

Default Title

Input

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

Output

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

Custom Title

You may set custom title by appending the text right after the "type" of the container.

Input

::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code

```js
!invite[your_channel_name];
```

:::

::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code

```js
!invite[your_channel_name];
```

:::

Output

STOP

Danger zone, do not proceed

Click me to view the code

!invite[your_channel_name];

!invite[your_channel_name];

Custom Block

You can use it with <div> block tag

Input

<div class="info custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="tip custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="warning custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="danger custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="details custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="info custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="tip custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="warning custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="danger custom-block" style="padding-top: 8px">
  This is an info box.
</div>

<div class="details custom-block" style="padding-top: 8px">
  This is an info box.
</div>

Output

This is an info box.

This is an tip box.

This is an warning box.

This is an danger box.

This is an details box.

Buttons

We have custom button style

Large Button Style

Input

<style src="@theme/custom.css" scoped></style>
<div>
  <a class="content-ref" href="/MARKDOWN-EXTENSIONS">
    <span class="ref-details">
      <span class="content-ref-section-title">EXAMPLE SECTION TITLE</span>
      <span class="content-ref-page-title">EXAMPLE PAGE REFERANCE</span>
    </span>
    <svg style="width:32px;height:32px;" viewBox="0 0 20 20" class="content-ref-svg" aria-hidden="true"><path fill="currentColor" d="M6 8h5.293L5 14.293l1.414 1.414 6.293-6.293V15h2V6H6v2z"></path></svg>
  </a>
</div>

<style src="@theme/custom.css" scoped></style>
<div>
  <a class="content-ref" href="/MARKDOWN-EXTENSIONS">
    <span class="ref-details">
      <span class="content-ref-section-title">EXAMPLE SECTION TITLE</span>
      <span class="content-ref-page-title">EXAMPLE PAGE REFERANCE</span>
    </span>
    <svg style="width:32px;height:32px;" viewBox="0 0 20 20" class="content-ref-svg" aria-hidden="true"><path fill="currentColor" d="M6 8h5.293L5 14.293l1.414 1.414 6.293-6.293V15h2V6H6v2z"></path></svg>
  </a>
</div>

Output

EXAMPLE SECTION TITLEEXAMPLE PAGE REFERANCE

Small Button Style

Input

<style src="@theme/custom.css" scoped></style>
<div>
  <a class="content-ref-s" href="/MARKDOWN-EXTENSIONS">
    <span class="ref-details-s">
      <span class="content-ref-page-title-s">MARKDOWN-EXTENSIONS</span>
    </span>
    <svg style="width:32px;height:32px;" viewBox="0 0 20 20" class="content-ref-svg-s" aria-hidden="true"><path fill="currentColor" d="M6 8h5.293L5 14.293l1.414 1.414 6.293-6.293V15h2V6H6v2z"></path></svg>
  </a>
</div>

<style src="@theme/custom.css" scoped></style>
<div>
  <a class="content-ref-s" href="/MARKDOWN-EXTENSIONS">
    <span class="ref-details-s">
      <span class="content-ref-page-title-s">MARKDOWN-EXTENSIONS</span>
    </span>
    <svg style="width:32px;height:32px;" viewBox="0 0 20 20" class="content-ref-svg-s" aria-hidden="true"><path fill="currentColor" d="M6 8h5.293L5 14.293l1.414 1.414 6.293-6.293V15h2V6H6v2z"></path></svg>
  </a>
</div>

Output

MARKDOWN-EXTENSIONS

Discord

Discord Application Commands Style

We use a special component for Discord application commands.

Input

<ApplicationCommands
    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
    appCmd-name="command-name"
    optionPillKey="options1"
    optionPillValue="option1-value"
    >
</ApplicationCommands>

<ApplicationCommands
    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
    appCmd-name="command-name"
    optionPillKey="options1"
    optionPillValue="option1-value"
    >
</ApplicationCommands>

Output

/command-name

options1option1-value

You can also use it with two options:

Input

<ApplicationCommands
    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
    appCmd-name="command-name"
    optionPillKey="options1"
    optionPillValue="option1-value"
    optionPillKey2="options2"
    optionPillValue2="options2-value"
    >
</ApplicationCommands>

<ApplicationCommands
    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
    appCmd-name="command-name"
    optionPillKey="options1"
    optionPillValue="option1-value"
    optionPillKey2="options2"
    optionPillValue2="options2-value"
    >
</ApplicationCommands>

Output

/command-name

options1option1-value

options2options2-value

Displaying Discord messages

We use @discord-message-components/vue to display "fake" Discord messages on pages. The reason for this is to make it easy for you to create, easy for anyone in the future to edit, and avoid having to take screenshots and using too many images on a page at once. Here's a preview of the components:

Test User09/15/2024

!ping

Senchabot Bot 09/15/2024

@Test User, pong! Took 50ms

The syntax to make this display is quite simple as well:

<DiscordMessages>
	<DiscordMessage profile="user">
		!ping
	</DiscordMessage>
	<DiscordMessage profile="bot" role-color="#1fab89" >
		<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
	</DiscordMessage>
</DiscordMessages>

<DiscordMessages>
	<DiscordMessage profile="user">
		!ping
	</DiscordMessage>
	<DiscordMessage profile="bot" role-color="#1fab89" >
		<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
	</DiscordMessage>
</DiscordMessages>

Custom Command Messages

Input

<DiscordMessages>
	<DiscordMessage profile="user">
		!ping
	</DiscordMessage>
	<DiscordMessage profile="bot" role-color="#1fab89" >
		pong! Took 50ms
	</DiscordMessage>
</DiscordMessages>

<DiscordMessages>
	<DiscordMessage profile="user">
		!ping
	</DiscordMessage>
	<DiscordMessage profile="bot" role-color="#1fab89" >
		pong! Took 50ms
	</DiscordMessage>
</DiscordMessages>

Output

Test User09/15/2024

!ping

Senchabot Bot 09/15/2024

pong! Took 50ms

Slash Command messages

ephemeral Version

Input

<DiscordMessages>
  <DiscordMessage :bot="true" profile="bot" role-color="#1fab89">
    <template #interactions>
      <DiscordInteraction :ephemeral="true" profile="user" :command="true">input</DiscordInteraction>
    </template>
    <DiscordMarkdown>
      OUTPUT
    </DiscordMarkdown>
  </DiscordMessage>
</DiscordMessages>

<DiscordMessages>
  <DiscordMessage :bot="true" profile="bot" role-color="#1fab89">
    <template #interactions>
      <DiscordInteraction :ephemeral="true" profile="user" :command="true">input</DiscordInteraction>
    </template>
    <DiscordMarkdown>
      OUTPUT
    </DiscordMarkdown>
  </DiscordMessage>
</DiscordMessages>

Output

Test User used /input

Senchabot Bot 09/15/2024

OUTPUT

Only you can see this

highlight Version

Input

<DiscordMessages>
  <DiscordMessage :bot="true" profile="bot" role-color="#1fab89">
    <template #interactions>
      <DiscordInteraction :highlight="true" profile="user" :command="true">input</DiscordInteraction>
    </template>
    <DiscordMarkdown>
      OUTPUT
    </DiscordMarkdown>
  </DiscordMessage>
</DiscordMessages>

<DiscordMessages>
  <DiscordMessage :bot="true" profile="bot" role-color="#1fab89">
    <template #interactions>
      <DiscordInteraction :highlight="true" profile="user" :command="true">input</DiscordInteraction>
    </template>
    <DiscordMarkdown>
      OUTPUT
    </DiscordMarkdown>
  </DiscordMessage>
</DiscordMessages>

Output

@Test User used /input

Senchabot Bot 09/15/2024

OUTPUT

Embed messages

Input

<DiscordMessages>
	<DiscordMessage profile="bot" role-color="#1fab89">
    <DiscordMention>everyone</DiscordMention>, TestUser is live on Twitch! Go check it out!
		<template #embeds>
			<DiscordEmbed
				embed-title="TestUser - Twitch"
				url="https://twitch.tv/senchabot"
				image="https://i.imgur.com/JIkTOA6.png" // This is test image
				author-name="Twitch"
			>
			</DiscordEmbed>
		</template>
	</DiscordMessage>
</DiscordMessages>

<DiscordMessages>
	<DiscordMessage profile="bot" role-color="#1fab89">
    <DiscordMention>everyone</DiscordMention>, TestUser is live on Twitch! Go check it out!
		<template #embeds>
			<DiscordEmbed
				embed-title="TestUser - Twitch"
				url="https://twitch.tv/senchabot"
				image="https://i.imgur.com/JIkTOA6.png" // This is test image
				author-name="Twitch"
			>
			</DiscordEmbed>
		</template>
	</DiscordMessage>
</DiscordMessages>

Output

Senchabot Bot 09/15/2024

@everyone, TestUser is live on Twitch! Go check it out!

Twitch

TestUser - Twitch

These components are made with Vue, but if you aren't familiar with Vue, don't worry about it. Just understand that you'll usually only need the profile="user"/profile="bot" attribute for the <DiscordMessage> component. All <DiscordMessage> components must be children of a single <DiscordMessages> component for it to display properly.

Do note the casing in <DiscordMessages> syntax instead of <discord-messages>. This is due to how VuePress renders markdown and HTML inside markdown files. It doesn't recognize <discord-messages> as an HTML element, therefore rendering anything indented inside it as a regular code block.

These components feature messages, mentions, embeds, interactions, and more. You can read more about how to use them by checking out @discord-message-components/vue.

Advanced

This docs uses markdown-it as the Markdown renderer.

Markdown Usages ​

Links ​

External Links ​

Internal Links ​

Badge ​

Custom Containers ​

Default Title ​

Custom Title ​

Custom Block ​

Buttons ​

Large Button Style ​

Small Button Style ​

Discord ​

Discord Application Commands Style ​

Displaying Discord messages ​

Custom Command Messages ​

Slash Command messages ​

Embed messages ​

Advanced ​

Markdown Usages

Links

External Links

Internal Links

Badge

Custom Containers

Default Title

Custom Title

Custom Block

Buttons

Large Button Style

Small Button Style

Discord

Discord Application Commands Style

Displaying Discord messages

Custom Command Messages

Slash Command messages

Embed messages

Advanced