https://github.com/falkz/md.html
Browser compatible markdown without compilation
https://github.com/falkz/md.html
html markdown preview syntax-highlighting
Last synced: about 1 month ago
JSON representation
Browser compatible markdown without compilation
- Host: GitHub
- URL: https://github.com/falkz/md.html
- Owner: FalkZ
- Created: 2020-03-19T18:12:23.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-25T10:22:32.000Z (over 5 years ago)
- Last Synced: 2025-01-10T23:27:31.879Z (over 1 year ago)
- Topics: html, markdown, preview, syntax-highlighting
- Language: CSS
- Homepage: https://unpkg.com/md.html.js@0.0.7/demo/md.html
- Size: 14.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# md.html
#### Browser compatible markdown without compilation
## Features
- **no compilation** required
- **syntax highlighting** out of the box
- **single file** for styles and markup
- **loading on demand**:
loads highlighting and language support only when needed
- **progressive loading**:
loads content first, for fast access over slow networks
## Getting Started
### Document head
Just add the `md.html.js` script:
```html
```
### Document body
Now you can write normal markdown inside the template tag:
```markdown
# Title
Write markdown here...
```javascript
// with syntax highlighting
```
```
### Styles
Just add styles to the head, as you normally would:
```css
body {
font-family: 'Sen', sans-serif;
max-width: 640px;
padding: 10px;
margin: 0 auto;
font-size: 18px;
}
```
### Syntax Highlighting
The default colors of the syntax highlighting can be changed like so
```css
code {
--base-color: #5c6e74;
--comment-color: #93a1a1;
--punctuation-color: #999;
--property-color: #905;
--selector-color: #690;
--operator-color: #a67f59;
--variable-color: #e90;
--keyword-color: #07a;
--function-color: #dd4a68;
}
```
### Demo
Here is the [demo page](https://unpkg.com/md.html.js/demo/md.html). If you want to edit it just right click `show source` to get your own copy.
## Editing
For easy editing in VSCode use the following settings:
```json
{
"files.associations": {
"*.md.html": "markdown"
},
"[markdown]": {
"editor.wordWrap": false
}
}
```
and of course the corresponding file extension `.md.html` for your files.
---
created with [md.html](https://unpkg.com/md.html.js/demo/md.html)