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.

v2.0.0-alpha.5

• fix(ui): Protect from errors in markdown-it (#233)
• fix(css): keep h1 -> h6 values from being overridden
• fix(build): UMD gets Vue error

v2.0.0-alpha.4

• Fixes to support Quasar 2 (#226)
  • Update component registration for Quasar 2
  • Fix rendering when the src property is provided and there is no default slot

v2.0.0-alpha.3

• fix(app-ext): Vue compilerOptions - must also include 'pre' tag
• fix(api): correct json api
• fix(ui): copy button props
• fix(app-ext): make compatible with latest Quasar
• fix(ui): use Vue's expose method over vm.proxy
• fix(ui): copy to clipboard for code
• fix(ui): src property does not work
• fix(app-ext): centralize ternary operator

v2.0.0-alpha.2

QMarkdown v4.0.0 Alpha 2

Welcome to the QMarkdown v4.0.0 Alpha 2 release

QMarkdown is now converted to use Vue v3

Moving to Vue 3 had its challenges. First of all, Vue 3 started condensing whitespace for slotted content. This broke the ability for QMarkdown to handle markdown in a slot. While waiting on a PR to be approved (from June of 2020) that would might resolve this, a different way was discovered. It was then that this release of QMarkdown was rushed out the door so it can start getting tested.

Until the final stable version is released, some aspects may change. We're not planning for additional changes, but unforeseen reported issues may require us to do breaking changes (unlikely, but keep this in mind). So please make sure that you read each v2 alpha/beta version's release notes carefully before upgrading.

Documentation

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

Installing

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

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

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.3

• fix(ui): Summary - arrow visibility (#208)

v1.4.2

• fix(ui): Image - missing alt property (#206)