QR Code
Overview
In Markdown, you can embed QR code images generated from text using simple syntax, allowing them to be scanned when needed.
The text can be:
- A remotely accessible link address
- A path to a
.mdfile within the VuePress site (both absolute and relative paths are supported) - Any plain text (avoid overly long text)
Configuration
This feature is disabled by default. You need to enable it in the theme configuration.
export default defineUserConfig({
theme: plumeTheme({
markdown: {
qrcode: true,
}
})
})Syntax
Inline Syntax
Inline syntax is suitable for shorter text, such as links.
<!-- Basic Syntax -->
@[qrcode](text)
<!-- With Attributes -->
@[qrcode card title="xxx" align="center" logo="/plume.png"](text)Container Syntax
Container syntax is suitable for longer text, such as paragraphs or multi-line text.
::: qrcode card title="xxx" align="center"
text
:::QR codes generated from overly long text may be truncated and potentially unscannable.
Props
Whether to enable the card style.
The path to the logo image displayed at the center of the QR code.
Only absolute paths are supported.
The size ratio of the logo relative to the QR code.
The title of the QR code.
The alignment of the QR code.
The display width of the QR code. When unspecified, it falls back to the stylesheet, independent of the internal canvas sampling width (300).
The following attribute configurations directly affect the final rendering of the QR code. Usually, the default values are sufficient and do not require configuration.
The color for the light parts of the QR code, i.e., the background color.
The color for the dark parts of the QR code, i.e., the QR code color.
The margin of the QR code.
Error Correction Level
Error correction allows the QR code to be successfully scanned even if it is dirty or damaged. Four levels are available depending on the operating environment.
Higher levels provide better error resistance but reduce the data capacity of the symbol.
If the QR code symbol is unlikely to be damaged, lower error correction levels like Low or Medium can be safely used.
When the QR code contains a logo, the default value is H.
QR Code Version
If not specified, a more suitable value will be automatically calculated. Valid range: 1-40.
Scaling factor. A value of 1 means 1 pixel per module (black dot).
The mask pattern used to mask the symbol.
If not specified, a more suitable value will be automatically calculated.
Examples
Accessible Remote Link
Input:
@[qrcode](https://github.com/pengzhanbo/vuepress-theme-plume)Output:
QR Code with Logo
Input:
@[qrcode logo="/plume.png" logo-size=0.25](https://github.com/pengzhanbo/vuepress-theme-plume)Output:
Internal Page Path
Internal page links will automatically have a logo added
Input:
@[qrcode](.) <!-- `.` represents the current page address -->
@[qrcode](./v-steps.md) <!-- Relative path -->
@[qrcode](/guide/markdown/qrcode.md) <!-- Absolute path -->Output:
Arbitrary Text
Input:
@[qrcode](vuepress-theme-plume is an open-source VuePress theme)Output:
Input:
::: qrcode title="The Road Not Taken · by Robert Frost"
Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.
:::Output:
QR Code Card with Information
Input:
@[qrcode card title="vuepress-theme-plume"](https://github.com/pengzhanbo/vuepress-theme-plume)Equivalent to:
::: qrcode card title="vuepress-theme-plume"
https://github.com/pengzhanbo/vuepress-theme-plume
:::Output:
