@quasar/quasar-ui-qmarkdown
Version:
Display inline markdown in your Quasar App
135 lines (94 loc) • 3.2 kB
Markdown
# QMarkdown
Display inline markdown in your Quasar App
[](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)
# 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
```
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
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';
export default {
components: {
QMarkdown,
},
};
</script>
```
## 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
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';
export default {
components: {
QMarkdown,
},
};
</script>
```
## UMD variant
Exports `window.QMarkdown`.
Add the following tag(s) after the Quasar ones:
```html
<head>
<!-- AFTER the Quasar stylesheet tags: -->
<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- at end of body, AFTER Quasar script(s): -->
<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.umd.min.js"></script>
</body>
```
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
```html
<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.rtl.min.css" rel="stylesheet" type="text/css" />
```
Test UMD version on [CodePen](https://codepen.io/Hawkeye64/pen/PojXVmV).
# 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](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
# License
MIT (c) Jeff Galbraith <jeff@quasar.dev>