@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

1. npm i comlink marked xss prismjs @gewd/markdown --save
2. npm i --save-dev @types/marked @types/prismjs
3. add MarkdownModule to your AppModule (or the one where you want to use it)
4. In your app folder ng g webWorker markdown

5. 
   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

<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.