Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Custom shortcode syntax for Elder.js

why you may need to customize shortcode syntax

  • elder.js self closing shortcodes look like this: {{foo bar="true"/}}. Note the / at the end is for Elder.js to parse both self closing and content wrapping shortcodes.
  • this clashes with other shortcode systems, eg., which uses shortcodes that look like this: {% youtube abc123 %}
  • in elder.config.js you can customize the start and end shortcode: {%foo bar="true"/%}
  • however that / there is non negotiable.
  • this is why you need to customize the shortcode syntax

the strategy is, if you use remark to process the text, to write a custom remark plugin to replace specifically this %} ending code of the shortcode to what Elder.js expects

the plugin source follows below

const visit = require("unist-util-visit");
// info used in writing this
const replacements = {
' %}': ` /%}` // the key replacement we are doing
// RegExp to find any replacement keys.
const regexp = RegExp(
'(' +
.join('|') +
const replacer = (_match, name) => replacements[name]
module.exports = function plugin(){
return function transformer(tree) {
visit(tree, ['text', 'html'], node => {
const processedText = node.value.replace(regexp, replacer)
node.value = processedText
* usage... eg in elderjs markdown plugin
let _preset = {
settings: {},
plugins: [
// other plugins here
require('./remark-replace') // the one we wrote above
async function parseMarkdown({filePath, markdown}) {
var post_vfile = vfile({ path: filePath, contents: markdown });
const file = await unified()
.use(_preset) // using the plugins
.catch((err) => {
throw err;
file.extname = '.html';
return file.toString();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.