• Charm Theme
  • A theme for Astro

  • Cupidatat ex id eiusmod aute do labore ea minim eu fugiat Lorem fugiat adipisicing.

light dark
Twitter
GitHub

Table of contents#

Table of contents#

You can add table of contents by adding Table of contents, toc or contents heading in the markdown file.

Only the first matching heading will generate the table of contents.

markdown
## Table of contents
markdown
## toc
markdown
## contents

GitHub repository cards#

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Yuhanawa
/
astro-charm
Description not set.
Loading
Loading
Loading
Loading

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

markdown
::github{repo="Yuhanawa/astro-charm"}

Admonitions#

Following types of admonitions are supported: note tip question warning notice important caution danger

NOTE

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

TIP

Optional information to help a user be more successful.

QUESTION

Questions that users should ask themselves.

WARNING

Critical content demanding immediate user attention due to potential risks.

NOTICE

Notice some information that users should be aware of.

IMPORTANT

Crucial information necessary for users to succeed.

CAUTION

Negative potential consequences of an action.

DANGER

style is similar to caution, but icon and title are different.

markdown
:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

The title of the admonition can be customized.

MY CUSTOM TITLE

This is a note with a custom title.

markdown
:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::
TIP

The GitHub syntax is also supported.

plaintext
> [!TIP]
> The GitHub syntax is also supported.

Video embed#

You can copy the embed code from YouTube or other platforms, and paste it in the markdown file. Or paste youtube or bilibili link to embed a video.

NOTE

We support two YouTube link formats: https://www.youtube.com/watch?v=id and https://youtu.be/id. For Bilibili, we accept both plain link and 【title】 link formats. Any URL parameters beyond the video ID (such as tracking parameters) will be disregarded.

markdown
https://www.youtube.com/watch?v=oZpYEEcvu5I

【【乐正绫AI】《世末歌者》——“我仍然在无人问津的阴雨霉湿之地”【原创PV付】】 https://www.bilibili.com/video/BV1jG4y1C7uv/?share_source=copy_web

Code blocks#

We support the following features:

  • Syntax highlighting
  • Copy button
  • Colorized Brackets
    • Enable by default
  • Notation Diff
    • Use !code ++ and !code -- to mark added and removed lines.
  • Notation Highlight
    • Allow using !code highlight notation in code to mark highlighted lines.
  • Notation Word Highlight
    • Highlight words based on the meta string provided on the code snippet.
  • Notation Focus
    • Allow using !code focus notation in code to mark focused lines.
  • Notation Error Level
    • Allow using !code error !code warning notation in code to mark highlighted lines.
  • Meta Highlight
    • Allow using {1,3-5} in the code snippet meta to mark highlighted lines.
  • Meta Word Highlight
    • Allow using /word/ in the code snippet meta to mark highlighted words.
  • Remove Notation Escape
    • Remove notation escapes. Useful when you want to write // [!code] in markdown. If you process // [\!code ...] expression, you can get // [!code ...] in the output.
  • TypeScript Twoslash
    • need explicit trigger or configuration

The reference for you might need: shiki transformers

TypeScript Twoslashts
interface Todo {
  Todo.title: stringtitle: string
}

const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonly
Readonly<Todo> = {
  
title: stringtitle: 'Go to bed early'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase(),
}

const todo: Readonly<Todo>todo.title = 'Go to bed Right now'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase()
Cannot assign to 'title' because it is a read-only property.

var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.
Number.p
  • parseFloat
  • parseInt
  • prototype
NumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`.
If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
All other strings are considered decimal.
arseInt('123', 10)

Custom twoslash message

ts
const const log: "custom message"log = "custom message"
You can use `// @log message` to make custom message
type type type = "log" | "error" | "warn" | "annotate"type = "log" | "error" | "warn" | "annotate"
`@error` `@warn` and `@annotate` are also supported
const const perpetual_motion_machine: stringperpetual_motion_machine = "cat" + "butter" 
It can't be done
const const cat_touch_water: stringcat_touch_water = "cat" + "water"
Cat couldn't touch water