So i’m not entirely sure (i don’t really use shortcodes at the moment) but it appears Markdown is not rendered in shortcodes and we need to do that with {{ body | markdown }}
then outputting it with the safe
filter so HTML tags are not escaped.
In exploring this, i believe i encountered two bugs:
- comment syntax doesn’t work around shortcodes
{#{% fenced_code_tab() %}#}
produces an undesired result (i.e. something)
- i have no clue why or how it happens, but apparently the
safe
filter places the closing </pre>
tag from the first codeblock at the end of the entire shortcode output?!?!
So i tried both with Markdown shortcodes and HTML shortcodes. Markdown shortcode works perfectly. HTML shortcode, as explained above, misplaces a </pre>
tag when used with the safe filter. Calling the content without safe
does not seem to produce this? I may be missing something, any ideas @Keats? @irevoire you can find my little modification of your experiment here. Inspecting the source of the HTML shortcode example with Firefox will highlight in red where the problem is.
Note that despite the tag being misplaced, it still works perfectly in major browsers who will correct the wrong HTML when building the DOM. So you can move on to the next stage! If you only want one tabbed codeblock per page, then you can use numeric IDs as you have started. However, if you have multiple codeblocks on the same page, the IDs will collide and you will need to introduce an ID “namespace” for every tabbed codeblock (eg #example1-1
, #example1-2
, #example2-1
…), passed as argument to the shortcode.
Also as i explained before if you want to display the language of each tab in the buttons, this is an information we cannot extract from the template itself, so it needs to be passed to the shortcode as an argument. A list is passed as argument like this [ "foo", "bar", "baz" ]
.
Let me know if you need more information. Happy hacking 