@quasar/quasar-ui-qmarkdown

v4.2.1

Published

24 days ago

Display inline markdown in your Quasar App

0High
0Medium
0Low

markdown quasar quasarframework

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
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:

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:

<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>

<script>
  import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';

  export default {
    components: {
      QMarkdown,
    },
  };
</script>

Vue 3 project

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>

UMD variant

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" />

The docs examples include CodePen buttons for quick UMD playground testing.

Setup

This project is a pnpm workspace mono-repo.

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 [email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme