Skip to content

Commit

Permalink
v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
hojas committed May 6, 2024
1 parent f198903 commit 5ab732e
Show file tree
Hide file tree
Showing 27 changed files with 10,332 additions and 2,843 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?

.nuxt
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand All @@ -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>
```

Expand All @@ -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(`
Expand All @@ -61,9 +61,9 @@ console.log("hi")
</script>
<template>
<VueMdRender :rehype-plugins="[rehypeHighlight]">
<VueMarkdownRender :rehype-plugins="[rehypeHighlight]">
{{ md }}
</VueMdRender>
</VueMarkdownRender>
</template>
````

Expand Down
24 changes: 12 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
},
Expand All @@ -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"
}
}
17 changes: 8 additions & 9 deletions packages/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
7 changes: 3 additions & 4 deletions packages/demo/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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,
{
Expand Down
4 changes: 2 additions & 2 deletions packages/demo/src/demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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
Expand Down
75 changes: 75 additions & 0 deletions packages/nuxt-demo/README.md
Original file line number Diff line number Diff line change
@@ -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.
83 changes: 83 additions & 0 deletions packages/nuxt-demo/app.vue
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions packages/nuxt-demo/components/MermaidRender.vue
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions packages/nuxt-demo/components/NormalCode.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<code><slot /></code>
</template>
Loading

0 comments on commit 5ab732e

Please sign in to comment.