Structured Tutorial Generator (using Markdown)

The output of tutomd is highly inspired by Unity Learn tutorials (see an example)

See live demo generated by tutomd 🐶

Features

• Friendly and intuitive to navigate 💅 (Looks good on mobile, too!)
• h1 are the section separators
  • first h1 is the page summary
  • following h1 are section "steps", with completion status
• Each .md file input is treated as a big step on the sidebar.
• Sidebar contains all "steps" titles from all files
• Metadata support through --- block at the beginning of the file.

Installation and usage

npm install -g tutomd

Generating the HTML output:

tutomd tutorial/ --out html
Copying from tutorial/4-directory-structure.png to /Users/endel/Projects/endel.dev/tutomd/4-directory-structure.png
Copying from tutorial/head.html to /Users/endel/Projects/endel.dev/tutomd/head.html
Copying from tutorial/tutomd.png to /Users/endel/Projects/endel.dev/tutomd/tutomd.png
Write /Users/endel/Projects/endel.dev/tutomd/index.html
Write /Users/endel/Projects/endel.dev/tutomd/1-what-to-expect.html
Write /Users/endel/Projects/endel.dev/tutomd/2-installing-tutomd.html
Write /Users/endel/Projects/endel.dev/tutomd/3-markdown-essentials.html
Write /Users/endel/Projects/endel.dev/tutomd/4-structure-guide-and-formatting-rules.html
Write /Users/endel/Projects/endel.dev/tutomd/theme.css

You can find the sources of the live demo at tutorial/ directory.

Hey, I made this on stream!

Follow me on Twitch 😋 https://www.twitch.tv/endeld

License

MIT.