Cloud

<q-markdown-json-api />

Markdown

Markdown importeren

De app-extensie moet geïnstalleerd zijn om markdown-bestanden (*.md) te kunnen importeren. Dit werkt zowel voor @quasar/app-webpack als @quasar/app-vite. Om markdown-bestanden te importeren, plaats ze NIET in uw publieke map. Plaats ze in uw map assets.

<template>
  <q-markdown :src="ContactUs" show-copy />
</template>

<script>
import { defineComponent } from 'vue'
import ContactUs from 'assets/contact-us.md'

export default defineComponent({
  setup () {
    return {
      ContactUs
    }
  }
})
</script>

Prisma uitbreiden

Het pakket prismjs wordt gebruikt voor language highlighting. Wanneer Prism wordt geïnstalleerd door QMarkdown, laadt het zichzelf globaal. Je kunt het benaderen via window.Prism. Bezoek hun documentatie over het aanpassen van de runtime, zoals het toevoegen van extra taalondersteuning.

Eigenschappen wereldwijd

QMarkdown heeft de mogelijkheid om globale eigenschappen in te stellen via de useQMarkdownGlobalProps functie.

Om het sitebreed in te stellen, zet je het in een opstartbestand. De functie neemt een object met de camelCase naamgeving van de rekwisieten voor QMarkdown.

::: tip Elke eigenschap voor QMarkdown kan worden doorgegeven, maar moet camelCased zijn. Globale eigenschappen overschrijven lokale eigenschappen die je instelt op een instantie. :::

import { useQMarkdownGlobalProps } from '@quasar/quasar-ui-qmarkdown'

// defaults for QMarkdown
useQMarkdownGlobalProps({
  noLineNumbers: true,
  lineNumberAlt: '$'
})

::: waarschuwing De sleutels worden op geen enkele manier gevalideerd, dus zorg ervoor dat je het juiste type gebruikt voor die eigenschap om problemen te voorkomen. :::

Global Plugins

Ook is de eigenschap plugins toegevoegd om QMarkdown uit te breiden met markdown-it plugins. Je kunt zoiets doen in een opstartbestand:

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

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

In dit geval wordt de markdown-it-mermaid beschikbaar gemaakt voor alle QMarkdown instanties.

QMarkdown inheemse verwerking

QMarkdown heeft een aantal ingebouwde verwerkers om inline markdown te verwerken. Deze staan hieronder opgesomd:

Blockquotes

<example-viewer title="" file="Blockquotes" codepen-title="QMarkdown" />

Code

<example-viewer title="" file="Code" codepen-title="QMarkdown" />

Kopiëren naar klembord

<example-viewer title="" file="CopyToClipboard" codepen-title="QMarkdown" />

Containers

<example-viewer title="" file="Containers" codepen-title="QMarkdown" />

Nadruk

<example-viewer title="" file="Emphasis" codepen-title="QMarkdown" />

Omschrijving

<example-viewer title="" file="Heading" codepen-title="QMarkdown" />

Horizontale regels

<example-viewer title="" file="HorizontalRules" codepen-title="QMarkdown" />

Afbeeldingen

<example-viewer title="" file="Images" codepen-title="QMarkdown" />

Links

<example-viewer title="" file="Links" codepen-title="QMarkdown" />

Lijsten

<example-viewer title="" file="Lists" codepen-title="QMarkdown" />

Tabellen

<example-viewer title="" file="Tables" codepen-title="QMarkdown" />

Titels

<example-viewer title="" file="Titles" codepen-title="QMarkdown" />

Typografie

<example-viewer title="" file="Typography" codepen-title="QMarkdown" />

Uitbreiden met plugins

Om de payload van QMarkdown te verkleinen en de prestaties te verhogen, zijn veel van de "standaard" markdown-it plugins verwijderd voor v2.0.0+. Als je ze nodig hebt, kun je ze weer toevoegen via de eigenschap plugins of de globale rekwisieten, zoals hierboven beschreven.

Hier is een lijst met plugins die in QMarkdown v1.x zaten:

import abbreviation from 'markdown-it-abbr'
import deflist from 'markdown-it-deflist'
import emoji from 'markdown-it-emoji'
import footnote from 'markdown-it-footnote'
import insert from 'markdown-it-ins'
import mark from 'markdown-it-mark'
import subscript from 'markdown-it-sub'
import superscript from 'markdown-it-sup'
import taskLists from 'markdown-it-task-lists'

De rest van de plugins zijn aangepast met QMarkdown of worden noodzakelijk geacht (zoals de plugins voor afbeeldingen).

Afkortingen

<example-viewer title="" file="Abbreviations" codepen-title="QMarkdown" />

Definitie lijsten

<example-viewer title="" file="DefinitionLists" codepen-title="QMarkdown" />

Emojies

<example-viewer title="" file="Emojies" codepen-title="QMarkdown" />

Voetnoten

<example-viewer title="" file="Footnotes" codepen-title="QMarkdown" />

Invoegen

<example-viewer title="" file="Insert" codepen-title="QMarkdown" />

Mark

<example-viewer title="" file="Mark" codepen-title="QMarkdown" />

Subscript/superscript

<example-viewer title="" file="SubscriptSuperscript" codepen-title="QMarkdown" />

Takenlijsten

<example-viewer title="" file="TaskLists" codepen-title="QMarkdown" />

Zeemeermin

<example-viewer title="" file="Mermaid" codepen-title="QMarkdown" />

Geavanceerd

Redacteur

<example-viewer title="" file="Editor" codepen-title="QMarkdown" />