@gewd/markdown v1.0.0
@gewd/markdown
Angular Markdown render component, which uses a worker-process.
Only loads the worker, emoji-map, prism or additional languages once used inside the markdown.
Example
Install
npm i comlink marked xss prismjs @gewd/markdown --save
npm i --save-dev @types/marked @types/prismjs
- add
MarkdownModule
to your AppModule (or the one where you want to use it) - In your app folder
ng g webWorker markdown
const markdownWorker = () => new Worker( new URL('./markdown.worker.ts', import.meta.url), { name: 'markdown', type: "module" } );
/ in your app module / @NgModule({ declarations: AppComponent, imports: / .../, MarkdownModule , providers: [ { provide: MarkdownOptionsInjectorToken, useValue: { getWorker: markdownWorker, options: { prism: { ...DEFAULT_PRISM_OPTIONS,
/** if needed **/
languageFileType: 'min.js', // if you want to use the minified assets
languageMap: { // alias to load the real file
ts: 'typescript', // default
cs: 'csharp' // additional
}
}
}
} as MarkdownServiceOptions
},
]
})
6. copy the content of one the included workers into your created one
## Usage
.. as component
```html
<gewd-markdown [markdown]="'your markdown or var'">
</gewd-markdown>
.. as Service, add MarkdownService
to your needed component and call:
constructor (private service: MarkdownService) {
}
async someMethod () {
const result = await this.service.compileMarkdown('some **markdown**');
}
Included Worker (examples)
Worker | Description | Requirements |
---|---|---|
markdown-it.worker.ts | If you prefer markdown-it and its plugins | npm install markdown-it --save |
marked.prism.worker.ts | Marked, needs xss-package to sanitize the generated HTML | npm install marked xss prismjs --save |
marked.worker.ts | Marked, needs xss-package to sanitize the generated HTML | npm install marked xss --save |
mermaid.js support (using marked)
npm install mermaid --save
in angular.json
in your app's assets: [
array
{
"glob": "mermaid.min.js",
"input": "node_modules/mermaid/dist/",
"output": "./"
}
/* in your app module */
providers: [
{
provide: MarkdownOptionsInjectorToken,
useValue: {
// ... see other example
mermaidPath: 'mermaid.min.js', // path to where your mermaid.min.js-asset was copied
mermaidOptions: {
theme: 'neutral',
// and others see https://mermaid-js.github.io/mermaid/#/mermaidAPI?id=mermaidapi-configuration-defaults
}
}
}
]
prismjs support (using marked)
Note: If you don't need it use the content of marked.worker.ts
npm install prismjs --save
in angular.json
in your app's assets: [
array
{
"glob": "prism-@(c|csharp).js",
"input": "./node_modules/prismjs/components",
"output": "/assets/prism/"
}
if you want to use the minified prism-files use .min.js
in the glob
-part and inside your PrismOptions (see LoadMarkdownWorkerInjectorToken
-Example at the top)
in your app's styles: [
(or any other prismjs theme)
"node_modules/prismjs/themes/prism-okaidia.css"
add the languages you want by changing @(c|csharp)
, if you just want to copy all languages use *
MarkdownCacheService
You can inject your own version of MarkdownCacheService
by using the providers:
providers: [
MdCacheExampleService,
{
provide: MarkdownCacheService,
useExisting: MdCacheExampleService
}
],
Method | Description |
---|---|
getCached(raw) | Loads the cached version of raw |
saveCached(raw, rendered) | Saves the rendered version of raw |
getCachedPart | same as getCached just for parts |
saveCachedPart | same as saveCached |
A hash is generated of raw
to use as key to save/load the cached version.