Hugo Shortcode support

[ziggycross]

Hugo Shortcodes are very similar to directives which are already implemented. They use slightly different formatting, and are very extensible within the Hugo static site generator.

My goal is to add buttons to my toolbar for common shortcodes. It would be great to have built in support for shortcodes, or even just an example of how to implement them with custom components.

The example here for a custom directive button shows a YouTube button that allows a user to enter a video URL and create an embed. For shortcodes, we would want to take the video ID and add {{< youtube [video_id] >}} to the markdown document.
I'm sure there should be a straightforward way to modify this existing feature to support shortcodes, or other formats, but it is beyond my skill level.

[lafleurdeboum]

I'd like to second that ! MdxEditor is a nice fit to edit a Hugo website. A recipe to support directives that would translate to hugo shortcodes would be very welcome.

[lafleurdeboum]

ATM I'm doing the reverse action : Parse the directive in hugo, and output the shortcode. For inline directives, in a hugo template :

{{ $directive := `::([^:{]+){((?:(?:[^ ={]+)=(?:[^ =}]+) ?)+)}` }}

{{ .Content
    | htmlUnescape
    | replaceRE $directive `{{< $1 $2 >}}`
    | markdownify
}}

In layouts/shortcodes/DIRECTIVE_NAME.html, your shortcode. Then in the content :

::DIRECTIVE_NAME{NAMED_ARG_1="value1" NAMED_ARG_2="value2"}