QMarkdown

Display inline markdown in your Quasar App



Notes

It is important to note that you cannot use header or hash links or a TOC with the vue-router mode of hash. It must be set to history in your quasar.config.(*js|ts)

Usage

Quasar CLI project

Install the App Extension.

OR:

Install

``
pnpm add @quasar/quasar-ui-qmarkdown


or

yarn add @quasar/quasar-ui-qmarkdown

or

npm install @quasar/quasar-ui-qmarkdown
`

and create and register a boot file:

`js
import { defineBoot } from 'quasar/wrappers'
import VuePlugin from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'

export default defineBoot(({ app }) => {
app.use(VuePlugin)
})
`

OR:

`html



`

Vue CLI project

`js
import VuePlugin from '@quasar/quasar-ui-qmarkdown';
import '@quasar/quasar-ui-qmarkdown/dist/index.css';
import { createApp } from 'vue';

const app = createApp({
// root instance definition
});

app.use(VuePlugin);
app.mount('#q-app');
`

OR:

`html



`

UMD variant

Exports window.QMarkdown.

Add the following tag(s) after the Quasar ones:

`html








`

If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):

`html

`

Test UMD version on CodePen.

Setup

This project is a yarn workspace mono-repo.

`bash
$ yarn
$ yarn build:all
$ cd docs
$ quasar dev
``

Donate

If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith