feat: math & containers

generator/content-generator.ts

@@ -1,20 +1,39 @@
 import { PluginOption } from 'vite'
-import mdit from 'markdown-it'
+import * as mdit from 'markdown-it'
+import Token from 'markdown-it/lib/token.mjs'
 import matter from 'gray-matter'
 import Shiki from '@shikijs/markdown-it'
+import MathJax3 from 'markdown-it-mathjax3'
+import MarkdownItContainer from 'markdown-it-container'
 
-const md = mdit({
-  html: true,
-  linkify: true,
-  typographer: true,
-}).use(
-  await Shiki({
-    themes: {
-      light: 'catppuccin-latte',
-      dark: 'one-dark-pro',
+const md = mdit
+  .default({
+    html: true,
+    linkify: true,
+    typographer: true,
+  })
+  .use(MathJax3)
+  .use(MarkdownItContainer, 'warning')
+  .use(MarkdownItContainer, 'error')
+  .use(MarkdownItContainer, 'info')
+  .use(MarkdownItContainer, 'expander', {
+    render: (tokens: Token[], idx: number) => {
+      console.log(tokens[idx])
+      if (tokens[idx].nesting === 1) {
+        return `<ExpanderComponent class="expander"><template #header><span w-full font-bold text-sm>MORE</span></template><template>${tokens[idx].info}</template>\n`
+      } else {
+        return '</ExpanderComponent>\n'
+      }
     },
-  }),
-)
+  })
+  .use(
+    await Shiki({
+      themes: {
+        light: 'catppuccin-latte',
+        dark: 'one-dark-pro',
+      },
+    }),
+  )
 
 const scriptRe = /(<script[\s\S]*?>[\s\S]*?<\/script>)/g
 const styleRe = /(<style[\s\S]*?>[\s\S]*?<\/style>)/g

package.json

@@ -29,6 +29,7 @@
     "@types/compression": "^1.7.5",
     "@types/express": "^5.0.0",
     "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^22.10.2",
     "@types/serve-static": "^1.15.7",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -41,6 +42,8 @@
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
     "markdown-it": "^14.1.0",
+    "markdown-it-container": "^4.0.0",
+    "markdown-it-mathjax3": "^4.3.2",
     "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
     "shiki": "^1.24.2",

src/assets/base.css

@@ -88,6 +88,57 @@ img {
   --at-apply: bg-gray-200 'dark:bg-dark-100' rounded-full;
 }
 
+.warning,
+.error,
+.info {
+  --at-apply: p-4 rounded-md m-y-2;
+}
+
+.expander {
+  --at-apply: p-x-4 p-t-4 rounded-md m-y-2;
+}
+
+.warning::before,
+.error::before,
+.info::before {
+  --at-apply: text-sm font-bold;
+}
+
+.warning > p:last-of-type,
+.error > p:last-of-type,
+.info > p:last-of-type,
+.expander > p:last-of-type {
+  margin-bottom: 0;
+}
+
+.warning {
+  --at-apply: 'text-yellow-800 bg-yellow-200/20 dark:bg-yellow-500/20 dark:text-yellow-100';
+}
+
+.warning::before {
+  content: 'WARNING';
+}
+
+.error {
+  --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
+}
+
+.error::before {
+  content: 'ERROR';
+}
+
+.info {
+  --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
+}
+
+.info::before {
+  content: 'INFO';
+}
+
+.expander {
+  --at-apply: 'text-gray-800 bg-gray-200/30 dark:bg-gray-500/20 dark:text-gray-100 ';
+}
+
 @media (prefers-color-scheme: dark) {
   .shiki,
   .shiki span {

src/components/ExpanderComponent.vue

@@ -22,7 +22,6 @@ onMounted(() => {
 
   watch(content, (newSize) => {
     if (!collapsed.value) contentWrapperRef.value!.style.height = `${newSize}px`
-    console.log(newSize)
   })
 
   content.value = contentDesiredSizeWrapperRef.value!.scrollHeight

src/data/activities/the-ultimate-markdown-benchmark.md

@@ -0,0 +1,166 @@
+---
+title: ~THE ULTIMATE MARKDOWN BENCHMARK!!!~
+time: 2024-12-25
+metaDescription: 尝试所有在本项目中合法的 Markdown 语法
+---
+
+Merry, merry Christmas  
+Lonely, lonely Christmas
+
+---
+
+## Markdown Syntax
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+**Bold Text**
+
+_Italic Text_
+
+**_Bold and Italic Text_**
+
+~~Strikethrough Text~~
+
+- Unordered List Item 1
+- Unordered List Item 2
+
+1. Ordered List Item 1
+2. Ordered List Item 2
+
+[Link to Google](https://www.google.com)
+
+![Alt Text for Image](https://via.placeholder.com/150)
+
+`Inline Code`
+
+```python
+# Code Block
+def hello_world():
+    print("Hello, World!")
+```
+
+> Blockquote  
+> This is a blockquote.
+
+| Left-Aligned | Center-Aligned | Right-Aligned |
+| :----------- | :------------: | ------------: |
+| Left         |     Center     |         Right |
+| Data         |      Data      |          Data |
+
+**Escaping Characters:**  
+\*This is not italic\*
+
+**Inline Images with Links:**  
+[![Alt Text](https://via.placeholder.com/150)](https://www.google.com)
+
+**Horizontal Rule:**
+
+---
+
+## Extended Markdown Syntax
+
+### Math `(markdown-it-mathjax3)`
+
+When $(a \ne 0)$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are:
+$[x = {-b \pm \sqrt{b^2-4ac} \over 2a}]$
+
+$$
+f(x) =
+\begin{cases}
+    \frac{1}{2} \sum_{i=1}^{n} \left( x_i - \mu \right)^2 & \text{if } x \geq 0, \\
+    \int_{0}^{\infty} e^{-t} \cdot \log(1 + t) \, dt & \text{if } x < 0,
+\end{cases}
+$$
+
+where $\mu$ is the mean, and $x_i$ are the sample points. The matrix $\mathbf{A}$ is defined as:
+
+$$
+\mathbf{A} = \begin{bmatrix}
+a_{11} & a_{12} & \cdots & a_{1n} \\
+a_{21} & a_{22} & \cdots & a_{2n} \\
+\vdots & \vdots & \ddots & \vdots \\
+a_{m1} & a_{m2} & \cdots & a_{mn}
+\end{bmatrix}
+$$
+
+### Containers `(markdown-it-containers)`
+
+::: warning
+If you’re using drugs, stop it, get some help.
+:::
+
+::: error
+The failing system failed successfully.
+:::
+
+::: info
+Never gonna give you up,  
+Never gonna let you down,  
+Never gonna run around and,  
+Desert you~
+:::
+
+::: expander
+Never gonna give you up,  
+Never gonna let you down,  
+Never gonna run around and,  
+Desert you~
+:::
+
+## UnoCSS
+
+<h2 text-amber dark:text-blue font-italic font-black text-5xl text-shadow-lg class="text-shadow-color-amber-6/20 dark:text-shadow-color-blue-3/20" >UnoCSS support</h2>
+
+## Reactivity
+
+<span class="counter" font-bold text-lg>Current value: {{ count }}</span>
+<button v-on:click="add" m-t-2>
+ADD ONE!
+</button>
+
+## Vue Components
+
+<ProjectCard :project="project" />
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ProjectCard from '@/components/ProjectCard.vue'
+import type { Project } from '@/data/project'
+const count = ref(0)
+const project : Project = {
+  title: '>_<',
+  description: 'Ciallo～(∠・ω< )⌒★',
+  image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.cfn5B-21s-pyI5_couP9NQHaHa'
+}
+
+function add() {
+  count.value++
+}
+</script>
+
+<style lang="css" scoped>
+.counter {
+  display: block;
+}
+
+button {
+  border: 0;
+  border-radius: 1rem;
+  padding: 1rem 2rem;
+  background-color:rgb(222, 222, 222);
+}
+
+button:hover {
+  background-color:rgb(214, 214, 214);
+}
+</style>

src/main.ts

@@ -4,6 +4,7 @@ import './assets/base.css'
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import { createRouter, RouterSymbol } from './router/router'
+import ExpanderComponent from './components/ExpanderComponent.vue'
 
 const activityModules = import.meta.glob('./data/activities/*.md')
 const newsModules = import.meta.glob('./data/news/*.md')
@@ -15,5 +16,6 @@ export function createApp() {
   app.provide(RouterSymbol, router)
   app.provide('activityModules', activityModules)
   app.provide('newsModules', newsModules)
+  app.component('ExpanderComponent', ExpanderComponent)
   return { app, router }
 }

vite.config.ts

@@ -12,7 +12,14 @@ import MarkdownContentGenerator from './generator/content-generator'
 export default defineConfig({
   plugins: [
     MarkdownContentGenerator(),
-    vue({ include: [/\.vue$/, /\.md$/] }),
+    vue({
+      include: [/\.vue$/, /\.md$/],
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('mjx-'),
+        },
+      },
+    }),
     vueDevTools(),
     UnoCSS(),
     ActivityListGenerator(),