https://github.com/hackmdio/themes
Official HackMD themes repository
https://github.com/hackmdio/themes
Last synced: 8 months ago
JSON representation
Official HackMD themes repository
- Host: GitHub
- URL: https://github.com/hackmdio/themes
- Owner: hackmdio
- License: mit
- Created: 2022-06-27T06:07:56.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2022-08-25T07:43:36.000Z (over 3 years ago)
- Last Synced: 2025-04-08T04:15:47.597Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 540 KB
- Stars: 4
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HackMD Themes
[Description: TBD]
## Themes
| Theme | Preview | Embed Snippet |
| ------------------ | ----------------------------------- | ------------------------------ |
| GitBook Book Theme |  | `{% hackmd @themes/gitbook %}` |
## Getting Started with HackMD Themes Development
https://user-images.githubusercontent.com/4230968/186604892-f430af0a-c494-43c3-9e87-3ca1a9a901df.mp4
### Prerequisites
- [Register for a HackMD account](https://hackmd.io) and create an API token on [the settings page](https://hackmd.io/settings#api)
- [Create a test team](https://hackmd.io/c/tutorials/%2F%40docs%2Fwhat-is-team) for theme development, it can either be a private team or a public team.
### Setup
This project use [`pnpm`](https://pnpm.io/) as package manager. You can install it by:
```bash
npm install -g pnpm
```
Then install dependencies:
```bash
pnpm install
```
### Fill the credentials
Copy `.env.example` to `.env` and fill the credentials.
```bash
cp .env.example .env
```
Your `.env` file should look like this:
```bash
HACKMD_ACCESS_TOKEN=hackmd-access-token
HACKMD_WORKSPACE_TEAM_PATH=team-path
```
Where `hackmd-access-token` is the API token you created on [the settings page](https://hackmd.io/settings#api), and `team-path` is the path of the team you created for theme development. **Remember to change these values to your own**.
### Build
```bash
pnpm build
```
### Watch Themes and Build
```bash
pnpm dev
```
## How to create a new theme
1. Create a folder with the name of your theme in `src` directory, and create `style.scss` in it. For example, if your theme name is `my-theme`, you should create `src/my-theme/style.scss`.
2. Create a JSON file named `meta.json` in the same folder. The content of `meta.json` should be like this:
```json
{
"slug": "my-theme",
"name": "My HackMD Theme"
}
```
- `slug` is the permalink of your Theme
- `name` is the name of your theme
3. The folder structure might look like this:
```bash
src
└── my-theme
├── meta.json
└── style.scss
```
4. Run `pnpm dev` to watch your theme and build it. The CLI will print out a table like this:
```bash
┌───────────────────────────┬──────────────┬───────────────────────────────────────────────┬───────────────────────────────────────┐
│ title │ permalink │ publishLink │ syntax │
├───────────────────────────┼──────────────┼───────────────────────────────────────────────┼───────────────────────────────────────┤
│ HackMD Theme - My Theme │ gitbook-book │ https://hackmd.io/@test-team-dev/my-theme │ {% hackmd @test-team-dev/my-theme %} │
└───────────────────────────┴──────────────┴───────────────────────────────────────────────┴───────────────────────────────────────┘
```
- Use the `syntax` to include your theme in HackMD notes and test it.
## Thanks
- Workflow from [@Hsins](https://github.com/@Hsins)'s [hackmd-themes](https://github.com/Hsins/hackmd-themes) for inspiring this project.