This a customized implementation of markdown renderer utilizing remark plugins, rehype plugins and pyodide in react framework.
I was planning to build my own wiki page that hosts privately. My goal was to have sort of Python code blocks and render the output under the code block. There are several approaches including but not limited to building a HEXO plugin to render the output or building a customized react app that I can have full control of the design.
To extend the idea of rendering markdown files in React which may be useful in some cases in general while no existing template is available for this, this project has been produced.
This project was built on Vite and Reactjs. The page was decorated with Tailwind CSS and Daisyui.
Hello, hello, hello! Thank you for checking this repository out. As you may have noticed some performance-wise issues such as duplicate program execution and re-rendering when theme changes. To tackle those issues and stick with ReactJS, I moved on and implemented a huge amount of changes to convert this project into NextJs version. Now the project can be accessed in this repo: next-markdown-template.
This repository may not have further commits from me unless there are some significant issues. Please follow along with the NextJs version. Public contribution is always welcome.
The under-developing demo is hosted on Google Firebase and can be accessed here https://siraisinotes-demo.web.app/
- Frontpage https://siraisinotes-demo.web.app/
- Markdown render samples https://siraisinotes-demo.web.app/test
- Page from markdown files https://siraisinotes-demo.web.app/coding_notes/algorithm_c and https://siraisinotes-demo.web.app/coding_notes/python
- Index page for markdown pages https://siraisinotes-demo.web.app/notes
- ✅ Dark theme, Light theme and follow OS theme switch
- ✅ Read markdown files
- ✅ Render markdown (see the render results)
- ✅ Modularise markdown test page into react components
- ✅ Markdown renderer
- ✅ Theme switch in the navigation bar
- ✅ Code block execution
- ✅ Python code block (Pyodide) (OUTPUT ONLY)
- ✅ CPP code block (OUTPUT ONLY)
- ✅ Generate page depending on markdown file name
- ✅ Index page for listing all markdown files (support sub-directories)
- ✅ General Pages components
- ✅ Nav_bar
- ✅ Footer
- ✅ Markdown page
- ✅ Frontpage
- ✅ 404 page
- ✅ Implement fuzzy search (
fuse.js)
- 💭 Transfer from Javascript to Typescript
- 💭 Enhance code block render (Render once and add corresponding CSS)
- 💭 Image processing using Sharp js
- 💭 Google log-in and features with log-in users (bookmarks, lock pages access)
| ✅ | 🚧 | 💭 | |
|---|---|---|---|
| Done | Buggy | Working on | Brief Idea (Not likely be implemented) |
This template aimed to build an automatically constructed wiki-liked react app. To achieve this, the routing was based on file structure within ./src folder. By default, react-route-dom will create routes within Notes folder excluding markdownCheatsheet.md file.
.
├── Notes
│ ├── coding_notes
│ │ ├── python_tutorials
│ │ │ ├── python ch1
│ │ │ │ └── ch1.md <- become `<base url>/coding_notes/python_tutorials/python%20ch1/ch1`
│ │ │ ├── python ch2
│ │ │ │ └── ch2.md <- become `<base url>/coding_notes/python_tutorials/python%20ch2/ch2`
│ │ │ └── python.md <- become `<base url>/coding_notes/python_tutorials/python`
│ │ └── algorithm_c.md <- become `<base url>/coding_notes/algorithm_c`
│ └── markdownCheatsheet.md
├── page
├── utils
...The filtering behavior was defined in App.jsx file which can be customized.
The implementation of CPP worker (src/utils/cpp_worker) was adopted from https://github.com/InfiniteXyy/playcode.
In the latest version, markdown YAML heading support has been added. The deading will define the title, date and many attributes that will be rendered. The template of the Markdown files is as follows:
+=+=+=+
title: testing page
date: "2024-02-17 01:31:48"
exeCPP: false
exePYTHON: false
abstract: "This is the abstract of this individual post."
+=+=+=+
# Contents
# title
other texts
other textModify the following two parameters in App.jsx to filter out the files and directories for search.
const excludedFiles = ["markdownCheatsheet.md"]; // Array containing strings to exclude
const excludedDirectories = ["Projects", "Website page"]; // Array containing excluded directories- rdoc
rdoc is a project aimed at producing blog pages from mardown which is similar to this project. However, rdoc stopped updating for 5 years. In contrast, this project is currently under maintenance and built based on the most recent packages (including React and Pyodide).
Contents (table of content)
Github style collapse
Long text render sample
Horizonal rules
Emphasis
Blockquotes
Lists
Code blocks
Tables
Links
Images
Plugins (emojies, emphasis, subscript and superscript, ins and mark)
Footnotes
Definition lists
Custom containers
Python wrap
Mermaid
GitHub flavored markdown (GFM) and HTML
git clone https://github.com/siraisisatoru/react-markdown-template.git
cd react-markdown-template
npm i
npm run devAccess the demo via link http://localhost:5173/test
firebase login
npm install -g firebase-tools
firebase init
>? Which Firebase features do you want to set up for this directory? Press Space to select
features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and
(optionally) set up GitHub Action deploys
>? Please select an option: Use an existing project
>? Select a default Firebase project for this directory: <YOUR PROJECT> (<YOUR PROJECT>)
>? What do you want to use as your public directory? dist
>? Configure as a single-page app (rewrite all urls to /index.html)? No
>? Set up automatic builds and deploys with GitHub? No
>? File dist/index.html already exists. Overwrite? NoAny new ideas want to add to the project are welcome. Please submit a pull request or open up an issue and we can discuss further.
This project is licensed under the MIT License.