Skip to content
/ tutomd Public

📄 Tool that generates good-looking and structured tutorials with Markdown

License

Notifications You must be signed in to change notification settings

endel/tutomd

Repository files navigation

tutomd

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.