@j0nz/v-marked

0.1.2 • Public • Published

vue-strapdown

Installation

yarn install v-marked

Setup

import VMarked from '@j0nz/v-marked'
Vue.use(VMarked)

Advanced Setup With Syntax Highlighting from Prismjs

import VMarked from '@j0nz/v-marked'

Vue.use(VMarked, {
  syntaxHighlight: true,

  // attempts to use the cloudflare CDN.
  // pick a theme name from https://github.com/PrismJS/prism/tree/master/themes
  prismTheme: 'prism-tomorrow',

  // alternatively, passing the full url to the desired resource is possible
  prismThemeUrl: `https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-funky.css`
});

If you prefer to link to your prism css sheet in <head />, don't supply prismTheme or prismThemeUrl options, and give the linked stylesheet an id of #prism-theme to prevent to default stylesheet from loading.

Usage

Anywhere in your components, supply the <v-marked /> tag and fill it with all your markdown.

<v-marked>
# Marked in the browser
## Rendered by **marked**.

## thats neat
1. list 1
1. list 2
1. list 3

| header 1 | header 2 | header 3 |
|----------|----------|----------|
| 1        | 2        | 3        |
| 4        | 5        | 6        |

```javascript
if (true) {
  console.log("Written with v-marked")
}
```
</v-marked>

Gotchas

It is required that no extra indentation is used when writing your markdown. i.e.

        <v-marked>
          ### This Wont Work
        </v-marked>

<v-marked>
### but this will
</v-marked>

Package Sidebar

Install

npm i @j0nz/v-marked

Weekly Downloads

7

Version

0.1.2

License

ISC

Unpacked Size

530 kB

Total Files

19

Last publish

Collaborators

  • reed-jones