Rich Content
Jake G May 15, 2021 #Features #Video #Audio #Images #ShortcodesSeveral custom shortcodes are included to augment CommonMark. video
, image
, gif
, and audio
were created to help you take advantage of modern HTML elements in your writing.
Video
sources
is an array of video file paths. (mandatory)class
sets a class for the video.caption
sets the caption text below the video.w
sets the width of the video.h
sets the height of the video.autoplay
when set, autoplays the video on load.loop
when set, plays the video on a loop.muted
when set, sets the audio muted initially.playsinline
when set, plays the video embeded instead of fullscreen on mobile browsers.
** sources can be same path, relative path, or root path, like the img shortcode **
Optional Classes:
ci
can be used to center the image.fr
can be used to float the image right.fl
can be used to float the image left.b1
can be used to add a 1px border.
Usage
Output
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
Usage
Output
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
's Over 9000!!
It
Image
The image
shortcode returns a <picture>
tag with multiple sources.
Each string in the sources
array should be a path to an image file of a different type (avif
, webp
, png
, jpg
, etc).
The last image in the sources
array is used to create an <img>
tag for the browser to fall back on if the other formats are not yet supported.
sources
is an array of image file paths. (mandatory)class
sets a class for the image.caption
sets the caption text below the image.w
sets the width of the image.h
sets the height of the image.
** sources can be same path, relative path, or root path, like the img shortcode **
Optional Classes:
ci
can be used to center the image.fr
can be used to float the image right.fl
can be used to float the image left.b1
can be used to add a 1px border.
Usage
Output
![ITS OVER 9000!](over9000-640.webp)
GIF
The gif
shortcode is exactly the same as the video shortcode.
The only difference is it automatically has the additional properties: autoplay
, loop
, muted
, playsinline
.
Using the <video>
tag in place of gifs allows for reduced file sizes,
which is especially important in regions where internet is slower or
less reliable.
Usage
Output
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
Audio
The audio
shortcode takes a sources
array of strings and returns an
<audio>
tag. Each string in the sources
array should be a path to an
audio file of a different type (ogg
, mp3
, flac
, wav
, etc).
The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.
sources
is an array of file paths. (mandatory)class
sets a class for the audio.caption
sets the caption text below the audio.autoplay
when set, autoplays the audio on load.loop
when set, plays the audio on a loop.muted
when set, sets the audio muted initially.
** sources can be same path, relative path, or root path, like the img shortcode **
Optional Classes:
ci
can be used to center the image.fr
can be used to float the image right.fl
can be used to float the image left.b1
can be used to add a 1px border.
Usage
Output
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
Usage
Output
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
's Over 9000!!
It