[SCRIPT] Use advanced Markdown features (Images, etc.)

tips & tricks
1

As @alexandros suggested, I created a script to use enhanced Markdown capabilities – compared with the current Blackfriday state.

This script enables to take advantage of all Pandoc’s features when it comes to Markdown parsing. In particular it enables to:

  • add classes and any attribute to images: ![alt](src) {#id .class width=30 height=20px}
  • add markdown inside html elements (e.g. things inside a <div> with a class)

The script

Here it is:

You can get it with:

$ cd ~/bin
$ git clone https://gist.github.com/lebarde/3b49a8ff8ea9940829559c3e439bee9c md2htmlyaml

Notes

  1. You can also see here for pandoc extensions that are not enabled by default if some one is interesting you.
  2. If you are using some Markdown dialect in your writings and it is not well recognized by Hugo, you can look at here for all the Markdown variants that Pandoc recognize well.
  3. If you use a lot of specific markdown and don’t use drafts, you can also create a script that searches for all the drafts and converts them into html. You can add that in your deploy.sh script:
# Grep searches for all the drafts
# ...But there was many temporary files ending with ~.
DRAFTS=`grep -lr "draft:\s*true" content | grep -v "~"`

# Convert all the drafts
for i in $DRAFTS; do
  md2htmlyaml $i
done

Let me know if it is useful for you and/or if you have suggestions.

4 Likes
2

Thank you @lebarde

@digitalcraftsman Maybe this script should be included in the Hugo Docs Tools section. If you don’t have the time I could send a Pull Request.