v2.0.0-beta.6

QMarkdown v2.0.0-beta.6

Features

• feat(app-ext): re-instate import of *.md files (works for vite and webpack)
• feat(ui): content-style and content-class props can now take a string
• feat(ui): improved TS definitions for MarkdownItPluginsArray
• feat(ui): improved src/slot handling

Fixes

• fix(build): change chalk out for kolorist
• fix(app-ext): ensure proper Quasar plugins are available

Notes

After updating, run the following to have imports of *.md re-instated:

quasar ext invoke @quasar/qmarkdown

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Updating via Quasar CLI

quasar upgrade -i

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-beta.3/4

QMarkdown v2.0.0-beta.3/4

Features

• Support for q/app-webpack and q/app-vite (Quasar v2)

Breaking

• QMarkdown no longer supports *.md and *.vmd imports. Both Webpack and Vite plugins are available to do the same thing. QMarkdown hence forward, will strictly deal with inlined markdown in Vue SFC files.

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Updating via Quasar CLI

quasar upgrade -i

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-beta.7

QMarkdown v2.0.0-beta.7

Features

• none

Fixes

• fix(types): fix MarkdownIt type exports (#367)

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Updating via Quasar CLI

quasar upgrade -i

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-beta.2

QMarkdown v2.0.0-beta.2

Features

• none

Fixes

• fix: Missed "next" tag for installation

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-beta.1

QMarkdown v2.0.0-beta.1

Features

• feat(ui): add option loading for markdown-it plugins (#359)

Fixes

• fix(api): make the api better. Some things are not showing up properly.

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v1.4.4

QMarkdown v1.4.4

• Maintenance release

---

Installing

$ yarn add @quasar/quasar-ui-qmarkdown
# or
$ quasar ext add @quasar/qmarkdown

Documentation

QMarkdown v1 documentation is now hosted by GitHub. Visit the documentation to get more information.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-alpha.9

QMarkdown v2.0.0-alpha.9

Features

• feat(ui): add option loading for markdown-it plugins (#359)

---

Installing

Use the next tag whenever you'd install it normally.

$ yarn add @quasar/quasar-ui-qmarkdown@next
# or
$ quasar ext add @quasar/qmarkdown@next

Documentation

QMarkdown v2 documentation is now hosted by Netlify. Visit the documentation to get more information. The documentation is incomplete and is currently being updated. You can help out by PR-ing deficiencies.

Donations

QMarkdown is an open-source MIT licensed project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github
• One-off donation via PayPal

v2.0.0-alpha.8

• fix(ae): QMarkdown extension missing dependencies (#277)

v2.0.0-alpha.7

This release has some breaking changes. Make sure you read all the information.

New::

• feat(ui): new prop "plugins" replaces "extend"
• feat(ui): new global properties via "useQMarkdownGlobalProps" exported function

Fixed:

• fix(ui): if highlight is disabled, the passed in string should be returned
• fix(api): "content-class" and "content-style" cannot be strings
• fix(ui): titles show one short and one long line

Breaking:

• breaking: remove properties "extend" and "extendPrism"
• breaking(ui): remove unnecessary markdown-it plugins that can be added by user

QMarkdown got somewhat leaner and faster in performance. A lot of the default markdown-it plugins for QMarkdown were removed. However, if you need them, you can add them back on an as-needed basis using the new plugins property that replaces the extends property.

Here is an example using the markdown-it-mermaid plugin (Note: to prevent the example that contains markdown from rendering as markdown, the triple backtick had spaces added between them):

  <template>
  <div class="q-pa-md q-gutter-sm">
    <q-markdown
      :plugins="plugins"
    >
` ` `mermaid Optional Title
  graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
` ` `
    </q-markdown>
  </div>

</template>

<script>
import { defineComponent, ref } from 'vue'
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
import markdownItMermaid from '@datatraccorporation/markdown-it-mermaid'

export default defineComponent({
  name: 'Mermaid',
  components: {
    QMarkdown
  },

  setup () {
    const plugins = [markdownItMermaid]

    return {
      plugins
    }
  }
})
</script>

As well, there is a new way to set global properties, so you don't have to do it with each QMarkdown instance using the new useQMarkdownGlobalProps exported function.

In a boot file, add the following:

import { useQMarkdownGlobalProps } from '@quasar/quasar-ui-qmarkdown'
import markdownItMermaid from '@datatraccorporation/markdown-it-mermaid'

// defaults for QMarkdown
useQMarkdownGlobalProps({
  plugins: [markdownItMermaid]
})

The extendPrism property was removed because it is redundant. One Prism is loaded, it attaches itself globally to the window object and is now accessible via window.Prism. Visit their documentation on modifying the run-time, like adding additional language support.

Lastly, about the removal of plugins and performance, here is the old build results:

╔═════╤════════════════════════╤══════════╤═════════╗
║ Ext │ Filename               │     Size │ Gzipped ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.common.js   │ 274.73kb │ 96.03kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.esm.js      │ 274.74kb │ 96.07kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.umd.js      │ 615.42kb │       - ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.umd.min.js  │ 194.45kb │ 72.01kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.css         │   9.19kb │  2.13kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.min.css     │   7.69kb │  2.00kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.rtl.css     │   9.20kb │  2.13kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.rtl.min.css │   7.71kb │  2.00kb ║
╚═════╧════════════════════════╧══════════╧═════════╝

and here are the new results:

╔═════╤════════════════════════╤══════════╤═════════╗
║ Ext │ Filename               │     Size │ Gzipped ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.common.js   │ 185.60kb │ 62.71kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.esm.js      │ 185.58kb │ 62.76kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.umd.js      │ 470.12kb │       - ║
╟─────┼────────────────────────┼──────────┼─────────╢
║  js │ dist/index.umd.min.js  │ 146.52kb │ 51.93kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.css         │   9.19kb │  2.13kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.min.css     │   7.69kb │  2.00kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.rtl.css     │   9.20kb │  2.13kb ║
╟─────┼────────────────────────┼──────────┼─────────╢
║ css │ dist/index.rtl.min.css │   7.71kb │  2.00kb ║
╚═════╧════════════════════════╧══════════╧═════════╝

Pay attention to the UMD size.

v2.0.0-alpha.6

Bug Fixes

• fix(ui): Protect from errors in markdown-it (#233)
• fix(css): keep h1 -> h6 values from being overridden
• fix(build): UMD gets Vue error
• fix(ui): Can't use markdown-it-mathjax3 plugin because of \n replacement from src attribute (#265)

New
There is a new property fix-cr that when set runs this RegEx on the src property: props.src.replace(/\\n/gi, '\n'). This was the default behavior, but now, if you want this, you need explicitly set it via the fix-cr boolean property. The reason for this is that it conflicts with certain markdowns for the markdown-it-mathjax3 plugin.