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.