v2.0.0

Author: hojas

.gitignore

@@ -21,3 +21,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.nuxt

README.md

@@ -15,13 +15,13 @@ $ npm install vue-markdown-viewer
 ```vue
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 
 const md = ref('## hi')
 </script>
 
 <template>
-  <VueMdRender>{{ md }}</VueMdRender>
+  <VueMarkdownRender>{{ md }}</VueMarkdownRender>
 </template>
 ```
 
@@ -30,16 +30,16 @@ Use a plugin to support gfm:
 ```vue
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 import remarkGfm from 'remark-gfm'
 
 const md = ref('## hi')
 </script>
 
 <template>
-  <VueMdRender :remark-plugins="[remarkGfm]">
+  <VueMarkdownRender :remark-plugins="[remarkGfm]">
     {{ md }}
-  </VueMdRender>
+  </VueMarkdownRender>
 </template>
 ```
 
@@ -48,7 +48,7 @@ Use a plugin to support syntax highlight:
 ````vue
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 import rehypeHighlight from 'rehype-highlight'
 
 const md = ref(`
@@ -61,9 +61,9 @@ console.log("hi")
 </script>
 
 <template>
-  <VueMdRender :rehype-plugins="[rehypeHighlight]">
+  <VueMarkdownRender :rehype-plugins="[rehypeHighlight]">
     {{ md }}
-  </VueMdRender>
+  </VueMarkdownRender>
 </template>
 ````
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-markdown-viewer",
   "type": "module",
-  "version": "1.0.1",
-  "packageManager": "pnpm@8.14.1",
+  "version": "2.0.0",
+  "packageManager": "pnpm@9.0.6",
   "license": "MIT",
   "repository": "hojas/vue-markdown-viewer",
   "bugs": "https://github.com/hojas/vue-markdown-viewer/issues",
@@ -21,17 +21,17 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/vue-markdown-viewer.js",
-      "require": "./dist/vue-markdown-viewer.umd.cjs"
+      "require": "./dist/vue-markdown-viewer.cjs"
     }
   },
-  "main": "./dist/vue-markdown-viewer.umd.cjs",
+  "main": "./dist/vue-markdown-viewer.cjs",
   "module": "./dist/vue-markdown-viewer.js",
   "types": "./dist/index.d.ts",
   "files": ["dist"],
   "scripts": {
-    "dev": "node ./scripts/dev.cjs",
+    "dev:vue": "node ./scripts/dev.cjs --demo=vue",
+    "dev:nuxt": "node ./scripts/dev.cjs --demo=nuxt",
     "build": "node ./scripts/build.cjs",
-    "build:demo": "node ./scripts/build-demo.cjs",
     "lint": "eslint .",
     "push": "pnpm build && npm publish"
   },
@@ -42,12 +42,12 @@
     "unified": "^11.0.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.3",
-    "@types/node": "^20.11.5",
-    "eslint": "^8.56.0",
+    "@antfu/eslint-config": "^2.16.1",
+    "@types/node": "^20.12.8",
+    "eslint": "^9.2.0",
     "shelljs": "^0.8.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vue-tsc": "^1.8.27"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
   }
 }

packages/demo/package.json

@@ -7,24 +7,23 @@
     "build": "vite build"
   },
   "dependencies": {
-    "github-markdown-css": "^5.5.0",
+    "github-markdown-css": "^5.5.1",
     "highlight.js": "^11.9.0",
-    "katex": "^0.16.9",
-    "mermaid": "^10.6.1",
+    "katex": "^0.16.10",
+    "mermaid": "^10.9.0",
     "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",
-    "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-toc": "^9.0.0",
-    "vue": "^3.4.3",
+    "vue": "^3.4.26",
     "vue-markdown-viewer": "workspace:*"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.27"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
   }
 }

packages/demo/src/App.vue

@@ -2,15 +2,15 @@
 import 'github-markdown-css/github-markdown-dark.css'
 import 'highlight.js/styles/night-owl.css'
 import 'katex/dist/katex.css'
+
 import remarkGfm from 'remark-gfm'
 import remarkToc from 'remark-toc'
 import remarkMath from 'remark-math'
 import rehypeSlug from 'rehype-slug'
-import rehypeRaw from 'rehype-raw'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeKatex from 'rehype-katex'
 
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 import MermaidRender from './components/MermaidRender.vue'
 import NormalCode from './components/NormalCode.vue'
 import content from './demo.md?raw'
@@ -24,14 +24,13 @@ function code(properties: any) {
 </script>
 
 <template>
-  <VueMdRender
+  <VueMarkdownRender
     class="markdown-body"
     :content="content"
     :components="{ code }"
     :remark-plugins="[remarkGfm, remarkToc, remarkMath]"
     :rehype-plugins="[
       rehypeSlug,
-      rehypeRaw,
       [
         rehypeHighlight,
         {

packages/demo/src/demo.md

@@ -22,7 +22,7 @@ Here is an example of a plugin to highlight code: [rehype-highlight](https://git
 
 ```html
 <script lang="ts" setup>
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 import rehypeHighlight from 'rehype-highlight'
 </script>
 
@@ -106,7 +106,7 @@ You can pass components to change things:
 
 ```html
 <script lang="ts" setup>
-import { VueMdRender } from 'vue-markdown-viewer'
+import { VueMarkdownRender } from 'vue-markdown-viewer'
 import MyFancyRule from './components/my-fancy-rule.js'
 
 const renderHr = (properties) => MyFancyRule

packages/nuxt-demo/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

packages/nuxt-demo/app.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import 'github-markdown-css/github-markdown-dark.css'
+import 'highlight.js/styles/night-owl.css'
+import 'katex/dist/katex.css'
+
+import { onMounted, getCurrentInstance } from 'vue'
+import remarkGfm from 'remark-gfm'
+import remarkToc from 'remark-toc'
+import remarkMath from 'remark-math'
+import rehypeRaw from 'rehype-raw'
+import rehypeHighlight from 'rehype-highlight'
+import rehypeKatex from 'rehype-katex'
+
+import { VueMarkdownRender } from 'vue-markdown-viewer'
+import MermaidRender from './components/MermaidRender.vue'
+import NormalCode from './components/NormalCode.vue'
+import content from './demo.md?raw'
+
+function code(properties: any) {
+  if (properties.className?.includes('language-mermaid')) {
+    return MermaidRender
+  }
+
+  return NormalCode
+}
+
+const instance = getCurrentInstance()
+onMounted(() => {
+  instance?.proxy?.$forceUpdate()
+})
+</script>
+
+<template>
+  <VueMarkdownRender
+      class="markdown-body"
+      :content="content"
+      :components="{ code }"
+      :remark-plugins="[remarkGfm, remarkToc, remarkMath]"
+      :rehype-plugins="[
+      rehypeRaw,
+      [
+        rehypeHighlight,
+        {
+          plainText: ['mermaid'],
+        },
+      ],
+      [
+        rehypeKatex,
+        {
+          macros: {
+            '\\f': '#1f(#2)',
+          },
+        },
+      ],
+    ]"
+  />
+</template>
+
+<style>
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background: #000;
+  scroll-behavior: smooth;
+}
+</style>
+
+<style scoped>
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+}
+
+@media (max-width: 767px) {
+  .markdown-body {
+    padding: 15px;
+  }
+}
+</style>

packages/nuxt-demo/components/MermaidRender.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { ref, onMounted } from "vue"
+import mermaid from 'mermaid'
+
+const pre = ref()
+
+onMounted(async () => {
+  mermaid.initialize({ startOnLoad: false })
+  await mermaid.run({
+    nodes: [pre.value],
+    suppressErrors: true
+  })
+})
+</script>
+
+<template>
+  <div>
+    <div ref="pre" class="mermaid"><slot /></div>
+  </div>
+</template>

packages/nuxt-demo/components/NormalCode.vue

@@ -0,0 +1,3 @@
+<template>
+  <code><slot /></code>
+</template>