How to Use

Well... it's not finished yet but ready to use.

I will show you how to create a new page

open views/markdown and create new file with format .md.

WARNING: do not use special characters when naming files.

Open a new file and fill it with markdown

Example:

---
title: Your Title
---

# Hello World
> Blockquote
[Link]()

Now check by going to the url http://your-web.com/article/filename.

You can also custom css in public/style.css.

Check config.toml file for global configuration

and frontmatter for inpage configuration.

Example open https://markdownitapp.mioun.repl.co/example.

To run server use

bash main.sh

instead of

npm start

if it's the first time.

And then, you can add anything you want like navbar :)

Performance Features

The application includes several performance optimizations:

• File Caching: Markdown files are processed once and cached in memory, resulting in 86-95% faster response times on subsequent requests.
• Efficient Minification: CSS and JS files are minified using synchronous operations for faster build times.

Dark Mode

The application now includes a fully functional dark mode feature:

• Toggle Button: Click the 🌑/☀️ button in the bottom-right corner to switch between light and dark modes
• Persistent Preference: Your dark mode preference is saved in localStorage and persists across page visits
• Dynamic Themes: Automatically switches highlight.js syntax highlighting theme to match the current mode
• Configuration: Set the default mode in config.toml with the darkmode option (users can still override this with the toggle)

CSS Framework Options

Choose between custom CSS or Pico CSS (classless framework):

• Edit config.toml and set css_framework to:
  • "custom" - Use custom styling (default)
  • "pico" - Use Pico CSS for automatic semantic HTML styling

Development Mode

When developing and making changes to markdown files, you can disable caching by setting the CLEAR_CACHE environment variable:

CLEAR_CACHE=true npm start

This ensures you see file changes immediately without needing to restart the server.

Static Site Generation

This project supports static site generation for deployment to serverless platforms like Vercel, Netlify, or GitHub Pages.

Development

npm install
npm run dev    # Start development server

Build for Production

npm run build  # Generates static site in /dist directory

Deploy to Vercel

npm install -g vercel
vercel

Or connect your GitHub repo to Vercel for automatic deployments.

Deploy to Netlify

npm install -g netlify-cli
netlify deploy --prod

Deploy to GitHub Pages

1. Build the site: npm run build
2. Push dist folder to gh-pages branch
3. Enable GitHub Pages in repository settings

Project Structure

• /views/markdown/*.md - Markdown content files
• /public/* - Static assets (CSS, JS, images)
• /dist/* - Built static site (generated)

---

That's all for now.

Footer

TODO:

1. Create a routing system
2. Reach 10★ on Github

Github

CREDITS:

1. markdown-it
2. markdown-it-task-lists
3. highlight.js
4. front-matter
5. handlebars