Use inside Angular application?

[vvalchev]

Hello,
I'm building an angular application and so far I've no success of integrating Marp inside it.
Has anybody did that before? Any help will be welcome.

Regards,
Valentin

[yhatt]

Marp (or Marpit) as a library is just outputting raw HTML and CSS so using inside Angular also should be possible in theory. However, you probable have to recognize how to integrate bare HTML and CSS with the framework well (e.g. [innerHTML] binding without sanitize, applying the style from pure CSS, handling of view encapsulation, and so on).

Unfortunately a maintainer is not familiar to Angular so cannot provide a clear answer.

FYI I've found a preceding use case of Marpit framework (+ reveal.js) within Angular component at https://github.com/SamuelNavD/yourslides/blob/master/frontend/src/app/components/slide-projector/slide-projector.component.ts. I don't know whether this code works correctly but may be partially helpful (NOTE: pay attention to open-source license, for using a part of codes written by the other).

[vvalchev]

Thank you for pointing out to the code above. I've actually managed to render the result in the Angular application.
Unfortunately, the slides are rendered altogether. I guess, this is the reason why the author above uses Reveal.js - to add scrolling.

Btw it would be nice, if the bespoke script from Marp-cli is available separately, so it can be embedded in other applications.

[yhatt]

Yes, Marp leaves how to control rendered slides to developer because we are focusing to render static HTML/CSS from Markdown. For example, marp.app is using SwiperJS with React, and my boilerplate example made by Vue is using vue-awesome-swiper.

Btw it would be nice, if the bespoke script from Marp-cli is available separately, so it can be embedded in other applications.

This idea had thought once while creating CLI, but we have not taken because we have not wanted to tie up how to control slides into a single as an official way. Running CLI via Node.js API is enough in Marp tools for now, but we would think about splitting template into another library if received many requests.

[vvalchev]

I got it working. Tried different things but the final one is great:

1. Created an Angular service, that exports both - Markdown-It instance and Marpit instance. (Marpit instance has own instance of markdown though). The plugins I've enabled for markdown-it are also available in Marpit.
2. Made a simple presentation and console.log() the generated CSS file from Marpit. Saved it and stored it into a separate css file.
3. Added the above css file to angular main styles.scss.
4. Changed Marpit initialization with a dummy theme:

/*! @theme default */
      section {
         width: 720px;
         height: 540px;
}

5. Modified the previously generated and saved CSS to match the style of the application (colours, typography, custom styling of tables and block quotes)
6. Created a presenter component. The most important part of the template is <div [innerHTML]="pages[page]" class="marpit"></div>.
7. Before setting the pages[] array, I had to use DomSanitizer.bypassSecurityTrustHtml().
8. As noticed, the presentation is rendered on pages. That allowed me to use the build-in progress component of the library I use (https://clarity.design/angular-components/progress-bar/). Added previous and next buttons as well.
9. For keyboard navigation made the component implement:

  @HostListener('document:keydown', ['$event'])
  onKeydown(e: KeyboardEvent) { }

The result is really amazing!

Presentations has the same style as the application theme. Even the highlight style in markdown and Marpit is exactly the same. And it is very lightweight!

As well, authoring presentations is amazing experience. I used to write them in Google Presentation, export to PDF, embed a PDF link inside. Now I edit the Marpit markdown, save and voila! - it is all updated.

(For editor, I made an Angular component based on CodePen editor + Prism highlighter)

Thank you Marp Team for the great product.