Display inline markdown in your Quasar App
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 tyo history in your quasar.config.(*js|ts)
Install the App Extension.
OR:
Install
yarn add @quasar/quasar-ui-qmarkdown
# or
npm install @quasar/quasar-ui-qmarkdown
and create and register a boot file:
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:
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';
export default {
components: {
QMarkdown,
},
};
</script>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:
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';
export default {
components: {
QMarkdown,
},
};
</script>Exports window.QMarkdown.
Add the following tag(s) after the Quasar ones:
<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):
<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.
This project is a yarn workspace mono-repo.
$ yarn
$ yarn build:all
$ cd docs
$ quasar devIf you appreciate the work that went into this project, please consider donating to Quasar or Jeff.
MIT (c) Jeff Galbraith [email protected]