Last Update Saturday, April 20, 2024 at 10:53:12 AM

EasyDoc

EasyDoc

A powerful technical documentation tool that generates completely local HTML pages and websites from markdown files.

created by:
Grandgeorg
Websolutions

Features

Generates completely local HTML Website.
  • You can just open the resulting HTML-files in the www directory locally (from filesystem) in a browser.
  • You can also drop / push the contents of the www directory to a HTTP-Server.
Rich markdown support and code highlighting features
  • Uses markdown-it with plugins for markdown to HTML rendering
  • Uses Prism with plugins to highlight code.
Fully configurable and customizable
  • Configure global and per page settings (see reference for details).
  • Customize all components as you like.
  • Edit SCSS files (under src/scss) to change theme.
  • Edit app.js to change navigation etc.
  • app.js uses pure vanilla JavaScript without any dependencies.
Built in Navigation
  • Table of contents on pages
  • Individual site navigation
  • Tag Navigator module

Install

Clone with git from master branch:

# clone via https:
git clone https://github.com/grandgeorg/easydoc.git
# or clone via SSH (if you have a key):
git clone git@github.com:grandgeorg/easydoc.git

Change into easydoc directory and run install:

cd ./easydoc/
npm install

You could now use EasyDoc from this directory, but we recommend, that for your documentations in different paths you use the setup.js from EasyDoc as follows:

# cd to some directory in some project of yours, where you want to setup your documentation with EasyDoc
cd /some/project/docs
# run setup.js from easydoc with node
# e.g. node D:\\srv\\vhost\\easydoc\\index.js
# in powershell you can use the following command:
# node (Get-Item -Path "D:\\srv\vhost\easydoc\index.js").FullName
node /path/where/you/cloned/and/installed/easydoc/setup.js
# edit newly generated config files (.env, nav.js, package.json - author, description, keywords) in /some/project/docs ...
# put some md-files into docs directory
# you can now run
npm run build
# if you also want to use nodemon to watch your file changes first run
npm install
# then you can run
npm run watch

Usage

# watches on file changes and runs build:
npm run watch
# or build one time
npm run build
🖿 easydoc directory structure
🗁 easydoc
 ├🗀 .git
 ├🗀 .vscode
 ├🟢 docs
 │ └🗏 index.md 🖤
 ├🗀 lang 🖊️
 ├🗁 manual 📌
 │ ├🗀 assets
 │ ├🗀 img
 │ ├🗏 easydoc.html
 │ ├🗏 easydoc.md
 │ ├🗏 easydoc-reference.html
 │ └🗏 easydoc-reference.md 
 ├🗀 node_modules
 ├🗀 setup 🖊️
 ├🗀 src 🖊️
 ├🗀 templates 🖊️
 ├🔵 www
 │ ├🗀 assets 🖊️
 │ ├🟢 img
 │ ├🗏 index.html 🖤
 │ └🗏 meta.js 🖤
 ├🗏 .env ✏️
 ├🗏 .gitignore
 ├🗏 .hintrc
 ├🗏 index.js 🖊️
 ├🗏 nav.js ✏️
 ├🗏 nodemon.json
 ├🗏 package.json
 ├🗏 package-lock.json
 └🗏 webpack.config.js

╭──────────────────────────═━┈💬┈━═──────────────────────────╮
│  🟢 input directories. Start creating files here.          │
│  🔵 output directory. Html files will be generated here.   │
│  ✏️ configure EasyDoc                                      │
│  🖊️ change EasyDoc                                         │
│  📌 It's me. You are reading these documents right now.    │
│  🖤 Remove these documentation files for a blank start.    │
╰──────────────────────────═━┈💬┈━═──────────────────────────╯

For configuration and further usage refer to the EasyDoc Reference


Workflow

For the most convenient use do the following:

  1. Start Visual Studio Code from the easydoc directory.
  2. Start the Live Server extension.
  3. Run npm run watch.
  4. Put the vscode and the browser window side by side.
  5. Start creating and editing markdown files in docs directory.
  6. Use git if working in a team.
Workspace Example Screenshot

EasyDoc workspace example with Visual Studio Code and browser side by side

Workflow Example Video