https://github.com/aegisjsproject/markdown
Markdown parser for `@aegisjsproject/core`
https://github.com/aegisjsproject/markdown
aegis markdown sanitizer-api
Last synced: 4 months ago
JSON representation
Markdown parser for `@aegisjsproject/core`
- Host: GitHub
- URL: https://github.com/aegisjsproject/markdown
- Owner: AegisJSProject
- License: mit
- Created: 2024-02-05T23:56:07.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-04-30T14:15:28.000Z (about 1 year ago)
- Last Synced: 2024-05-02T03:03:07.536Z (about 1 year ago)
- Topics: aegis, markdown, sanitizer-api
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@aegisjsproject/markdown
- Size: 266 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# `@aegisjsproject/markdown`
Markdown parser for [`@aegisjsproject/core`](https://github.com/AegisJSProject/core)
[](https://github.com/AegisJSProject/markdown/actions/workflows/codeql-analysis.yml)
[](https://github.com/AegisJSProject/markdown/blob/master/LICENSE)
[](https://github.com/AegisJSProject/markdown/commits/master)
[](https://github.com/AegisJSProject/markdown/releases)
[](https://github.com/sponsors/shgysk8zer0)
[](https://www.npmjs.com/package/@aegisjsproject/markdown)
[](https://www.npmjs.com/package/@aegisjsproject/markdown)
[](https://github.com/AegisJSProject)
[](https://twitter.com/shgysk8zer0)
[](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
- - -
- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
- [Contributing](./.github/CONTRIBUTING.md)
## Adding language support
In order to reduce bundle size, only plaintext is available/supported by default.
However, you can easily add support for additional languages in a variety of ways:
### Registering from Static Imports
**Note**: All languages provided by `highlight.js` may be found at [`/es/languages/${lang}.min.js`](https://unpkg.com/browse/@highlightjs/cdn-assets/es/languages/).
```js
import { registerLanguage } from '@aegisjsproject/markdown';
import javascript from 'highlight.js/lanuages/javascript.min.js';
import xml from 'highlight.js/languages/xml.min.js';
import css from 'highlight.js/languages/css.min.js';
registerLanguage('javascript', javascript);
registerLanguage('xml', xml);
registerLanguage('css',css);
// Or
import { registerLanguages } from '@aegisjsproject/markdown';
import javascript from 'highlight.js/lanuages/javascript.min.js';
import xml from 'highlight.js/languages/xml.min.js';
import css from 'highlight.js/languages/css.min.js';
registerLanguages({ javascript, xml, css });
```
### Dynamically Loading and Registering using Dynamic Imports
This uses `import()` for dynamic loading of language modules from `unpkg.com`.
**Note**: These are case-sensitive and **MUST** be the correct filename (without extension).
```js
import { loadLanguages } from '@aegisjsproject/markdown';
await loadLanguages('javascript', 'css', 'xml', 'typescript');
```
## Example
```js
import { md, createStyleSheet, getMarkdown, registerLanguages } from '@aegisjsproject/markdown';
import javascript from 'highlight.js/languages/javascript.min.js';
import css from 'highlight.js/languages/css.min.js';
import xml from 'highlight.js/languages/xml.min.js';
registerLanguages({ javascript, css, xml });
document.head.append(
createStyleSheet('github', { media: '(prefers-color-scheme: light)' }),
createStyleSheet('github-dark', { media: '(prefers-color-scheme: dark)' }),
);
document.getElementById('header').append(md`
# Hello, World!
## It is currently ${new Date()}.
`);
customElements.define('md-preview', class HTMLMDPreviewElement extends HTMLElement {
#shadow;
constructor() {
super();
this.#shadow = this.attachShadow({ mode: 'closed' });
const container = document.createElement('div');
container.id = 'container';
container.part.add('container');
this.#shadow.append(
createStyleSheet('github', { media: '(prefers-color-scheme: light)' }),
createStyleSheet('github-dark', { media: '(prefers-color-scheme: dark)' }),
container,
);
}
async attributeChangedCallback(name, oldVal, newVal) {
switch(name) {
case 'src':
if (typeof newVal === 'string') {
this.#shadow.getElementById('container').replaceChildren(await getMarkdown(this.src));
} else {
this.#shadow.getElementById('container').replaceChildren();
}
break;
default:
throw new Error(`Unhandled attribute change: ${name}.`);
}
}
set content(val) {
if (typeof val === 'string' && val.length !== 0) {
this.#shadow.getElementById('container').replaceChildren(md`${val}`);
this.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
this.#shadow.getElementById('container').replaceChildren();
}
}
get src() {
return this.getAttribute('src');
}
set src(val) {
if (typeof val === 'string' || val instanceof URL) {
this.setAttribute('src', val);
} else {
this.removeAttribute('src');
}
}
clear() {
this.content = null;
}
static get observedAttributes() {
return ['src'];
}
});
document.forms.test.addEventListener('submit', event => {
event.preventDefault();
const data = new FormData(event.target);
document.getElementById('preview').content = data.get('md');
});
document.forms.test.addEventListener('reset', () => document.getElementById('preview').clear());
```