https://github.com/jerosoler/markdown-content-vue
Markdown parse and component
https://github.com/jerosoler/markdown-content-vue
markdown markdown-parser remark vue
Last synced: 7 months ago
JSON representation
Markdown parse and component
- Host: GitHub
- URL: https://github.com/jerosoler/markdown-content-vue
- Owner: jerosoler
- Created: 2020-05-25T14:45:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T10:43:12.000Z (about 2 years ago)
- Last Synced: 2025-03-05T14:39:13.515Z (7 months ago)
- Topics: markdown, markdown-parser, remark, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/markdown-content-vue
- Size: 101 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Markdown content vue
Based on [@nuxt/content](https://github.com/nuxt/content) code.
View instructions on [link](https://content.nuxtjs.org/writing#markdown)
# Features
- Parse content
- Html
- Vue components
- Codeblocks (Prismjs)
# Install
```
npm install markdown-content-vue --save
```
# Usage
### Import
```javascript
import { markdownContent, markdownParse } from 'markdown-content-vue'
```
### Template
```html
```
### Script
Register component
```javascript
components: {
markdownContent
}
```
And parse Markdown
```javascript
async mounted() {
const md = new markdownParse()
const file = '---\ntitle: test\n---\n# Hello World\n ```javascript\n console.log("Hello") \n```\n \n'
this.code = await md.toJSON(file)
console.log(this.code)
},
```
# Beautiful example
### Install github-markdown-css
```
npm install github-markdown-css
```
### Import
```javascript
import 'github-markdown-css/github-markdown.css'
import 'prismjs/themes/prism-tomorrow.css'
```
### Template
```html
```