# QMarkdown
[](https://www.npmjs.com/package/@quasar/quasar-ui-qmarkdown)
[](https://www.npmjs.com/package/@quasar/quasar-ui-qmarkdown)
[](https://www.npmjs.com/package/@quasar/quasar-ui-qmarkdown)
[](https://www.npmjs.com/package/@quasar/quasar-ui-qmarkdown)
[](https://chat.quasar.dev)
[](https://twitter.com/jgalbraith64)
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](../app-extension).
**OR**:
Install
```bash
pnpm add @quasar/quasar-ui-qmarkdown
# or
bun add @quasar/quasar-ui-qmarkdown
# or
yarn add @quasar/quasar-ui-qmarkdown
# or
npm install @quasar/quasar-ui-qmarkdown
# or, in a Quasar CLI app
quasar ext add @quasar/qmarkdown
```
and create and register a boot file:
```js
import { defineBoot } from '#q-app'
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 3 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
```
The docs examples include CodePen buttons for quick UMD playground testing.
# Setup
This project is a pnpm workspace mono-repo.
```bash
pnpm install
pnpm build:ui
pnpm build:docs
```
# Support
If QMarkdown is useful in your workflow and you want to support ongoing maintenance:
- GitHub Sponsors: https://github.com/sponsors/hawkeye64
- PayPal: https://paypal.me/hawkeye64
# License
MIT (c) Jeff Galbraith
[](https://chat.quasar.dev)
[](https://twitter.com/jgalbraith64)
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](../app-extension).
**OR**:
Install
```bash
pnpm add @quasar/quasar-ui-qmarkdown
# or
bun add @quasar/quasar-ui-qmarkdown
# or
yarn add @quasar/quasar-ui-qmarkdown
# or
npm install @quasar/quasar-ui-qmarkdown
# or, in a Quasar CLI app
quasar ext add @quasar/qmarkdown
```
and create and register a boot file:
```js
import { defineBoot } from '#q-app'
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 3 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
```
The docs examples include CodePen buttons for quick UMD playground testing.
# Setup
This project is a pnpm workspace mono-repo.
```bash
pnpm install
pnpm build:ui
pnpm build:docs
```
# Support
If QMarkdown is useful in your workflow and you want to support ongoing maintenance:
- GitHub Sponsors: https://github.com/sponsors/hawkeye64
- PayPal: https://paypal.me/hawkeye64
# License
MIT (c) Jeff Galbraith