Documentation Viewer

A lightweight, static documentation viewer that renders Markdown files with syntax highlighting. Built as a single-page application with no backend requirements.

Features

📝 Renders Markdown documents with syntax highlighting
📑 Document outline/table of contents
📱 Responsive design with mobile support
🚀 Zero backend requirements - deploy anywhere
⚡ Fast client-side rendering

Getting Started

Prerequisites

Node.js and npm (only needed for development)

Installation

Clone the repository:

git clone <repository-url>
cd <repository-directory>

Install dependencies (only needed for development):
```
npm install
```

Deployment

This is a static website that can be hosted on any web server or static hosting service. Simply upload all files to your hosting provider.

For local testing, you can use any static file server. For example:

npx live-server

Usage

The file index is displayed on the left sidebar.
Click on a file to load its content.
The document outline is displayed on the right sidebar.
Use the menu button to toggle the sidebar on mobile devices.

Directory Structure

docs/               # Your markdown documents go here
├── images/         # Images referenced in documents
├── doc1.md
└── doc2.md
index.html         # Main entry point
config.json        # Document index configuration
styles.css         # Custom styling

Adding New Documents

Add your Markdown file to the docs directory.
Update to include the new document:

{
    "documents": [
        {
            "title": "Blueprint Depth Trace",
            "path": "docs/Blueprint Penetration Trace.md"
        },
        {
            "title": "New Document Title",
            "path": "docs/NewDocument.md"
        }
    ]
}

Configuring Folders

You can control whether a folder is expanded by default using defaultOpen. You can also specify a Font Awesome icon. Both properties (defaultOpen and icon) are optional — if you omit them, the folder will use default behavior.

Example in index.json:

{
    "folders": [
        {
            "title": "Folder 1",
            "defaultOpen": true,
            "icon": "fa-solid fa-folder",
            "documents": [
                {
                    "title": "Document 1",
                    "path": "docs/Document1.md"
                }
            ]
        }
    ]
}

Acknowledgements

marked for Markdown parsing.
highlight.js for syntax highlighting.
Font Awesome for icons

License

This project is licensed under the MIT License.

2.7 KiB Raw Blame History