README

`@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 install @gewd/markdown --save
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('./markdown.worker.ts', {
  name: 'markdown',
  type: "module"
});

/* in your app module */
@NgModule({
  declarations: [AppComponent],
  imports: [
    /* ...*/,
    MarkdownModule
  ],
  providers: [
    {
      provide: MarkdownOptionsInjectorToken,
      useValue: {
        getWorker: marked,
        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 GetWorkerPayload
    },
  ]
})

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.

Usage no npm install needed!