https://github.com/notiz-dev/ngx-markdoc

Markdoc for Angular
https://github.com/notiz-dev/ngx-markdoc

angular markdoc markdown

Last synced: 2 months ago
JSON representation

Markdoc for Angular

• Host: GitHub
• URL: https://github.com/notiz-dev/ngx-markdoc
• Owner: notiz-dev
• License: mit
• Created: 2022-07-15T14:19:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-20T14:47:38.000Z (about 1 year ago)
• Last Synced: 2024-05-01T11:28:34.472Z (9 months ago)
• Topics: angular, markdoc, markdown
• Language: TypeScript
• Homepage: https://ngx-markdoc.web.app
• Size: 1.13 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-markdoc - [Markdoc](https://markdoc.dev) component for Angular applications. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-markdoc - 🌎 [Markdoc](markdoc.dev) component for Angular applications. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-markdoc - 🌎 [Markdoc](markdoc.dev) component for Angular applications. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-markdoc - 🌎 [Markdoc](markdoc.dev) component for Angular applications. (Table of contents / Third Party Components)

README

        
# @notiz/ngx-markdoc

```bash

npm i @notiz/ngx-markdoc @markdoc/markdoc js-yaml

npm i -D @types/js-yaml

```

Set `esModuleInterop` to `true` in your `tsconfig.json`.

## Usage

Provide `HttpClient` in your `app.config.ts`

```ts

import { ApplicationConfig } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {

  providers: [provideRouter(routes), provideHttpClient()],

};

```

Import `Markdoc` into your component and use `` in your template.

```ts

import { Component } from '@angular/core';

import { Markdoc } from '@notiz/ngx-markdoc';

@Component({

  selector: 'app-docs',

  standalone: true,

  imports: [Markdoc],

  template: `  `,

})

export class DocsComponent {}

```

### 1. Content

```html

 # Markdoc for Angular 

```

### 2. Content input

```html

 

```

### 3. Markdown file

```html

```

## Options

Use `provideMarkdocOptions` to optionally pass a Markdoc configuration options.

```ts

import { ApplicationConfig } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideHttpClient } from '@angular/common/http';

import { provideMarkdocOptions } from '@notiz/ngx-markdoc';

import { Config, Node, Tag } from '@markdoc/markdoc';

export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    provideHttpClient(),

    provideMarkdocOptions({

      config: {

        tags: {

          figure: {

            selfClosing: true,

            attributes: {

              src: { type: String, required: true },

              alt: { type: String, required: true },

              caption: { type: String, required: true },

            },

            transform: (node: Node, config: Config) => {

              const { src, alt, caption } = node.transformAttributes(config);

              const imageTag = new Tag('img', { src, alt });

              const captionTag = new Tag('figcaption', {}, [caption]);

              return new Tag('figure', {}, [imageTag, captionTag]);

            },

          },

        },

      },

    }),

  ],

};

```

Now you can use `{% figure %}` tag in your Markdown file

```md

{% figure src="https://images.unsplash.com/photo-1610296669228-602fa827fc1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1675&q=80" alt="Pelican nebulae mosaic" caption="Pelican nebulae mosaic" /%}

```