此页内容

介绍

pengzhanbo

335字约1分钟

2024-04-04

概述

主题 使用 Shiki 在 Markdown 代码块实现语法高亮。

语言

Shiki 支持 超过 190+ 种语言, 你可以在 languages 查看所有支持的语言列表。

你可以通过以下语法为你使用的 语言所编写的代码 实现高亮效果:

```[lang]
```

其中,[lang] 为你使用的语言。

示例:

```js
const a = 1
console.log(a)
```
const a = 1
console.log(a)

高亮主题

Shiki 支持 超过 40+ 种高亮主题。

你可以在 Themes 找到所有支持的主题列表,根据个人的喜欢自定义 高亮主题。

Theme Plume 默认为 代码块使用的主题配置:

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      shiki: {
        theme: { light: 'vitesse-light', dark: 'vitesse-dark' }, 
      }
    }
  })
})

默认配置支持在 亮色/暗色 模式分别使用 vitesse-light/vitesse-dark 主题。

更多支持

得益于 Shiki 的强大能力,Theme Plume 还为 代码块 提供了 更多的 特性支持,它们让 代码块具备更强的表达能力。

同时,为了方便 更好的 完成 代码演示,Theme Plume 还提供了嵌入 CodePenJs FiddleCode SandboxReplit 的语法支持,你可以很方便的嵌入代码演示。

示例

C
#include <stdio.h>

#define ARR_LEN 7

void qsort(int v[], int left, int right);
void printArr(int v[], int len);

int main()
{
	int i;
	int v[ARR_LEN] = { 4, 3, 1, 7, 9, 6, 2 };
	printArr(v, ARR_LEN);
	qsort(v, 0, ARR_LEN-1);
	printArr(v, ARR_LEN);
	return 0;
}

void qsort(int v[], int left, int right)
{
	int i, last;
	void swap(int v[], int i, int j);

	if (left >= right)
		return;
	swap(v, left, (left + right) / 2);
	last = left;
	for (i = left+1; i <= right; i++)
		if (v[i] < v[left])
			swap(v, ++last, i);
	swap(v, left, last);
	qsort(v, left, last-1);
	qsort(v, last+1, right);
}

void swap(int v[], int i, int j)
{
	int temp;

	temp = v[i];
	v[i] = v[j];
	v[j] = temp;
}

void printArr(int v[], int len)
{
	int i;
	for (i = 0; i < len; i++)
		printf("%d ", v[i]);
	printf("\n");
}
HTML
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MDN Web Docs Example: Toggling full-screen mode</title>
    <link rel="stylesheet" href="styles.css">
    <style class="editable">
        video::backdrop {
          background-color: #448;
        }
    </style>

    <!-- import the webpage's javascript file -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <section class="preview">
      <video controls
        src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
        poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
        width="620">

        Sorry, your browser doesn't support embedded videos.  Time to upgrade!

      </video>
    </section>

<textarea class="playable playable-css" style="height: 100px;">
video::backdrop {
  background-color: #448;
}
</textarea>

<textarea class="playable playable-html" style="height: 200px;">
<video controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
Sorry, your browser doesn't support embedded videos.  Time to upgrade!
</video>
</textarea>

    <div class="playable-buttons">
        <input id="reset" type="button" value="Reset" />
      </div>
    </body>
    <script src="playable.js"></script>
  </body>
</html>