@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

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
```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)

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
  }
],

A hash is generated of raw to use as key to save/load the cached version.