import { Renderer } from 'marked' ; import { basename , extname } from 'path' ; /** Regular expression that matches whitespace. */ const whitespaceRegex = /\W+/g ; /** Regular expression that matches example comments. */ const exampleCommentRegex = /<!--\W*example\(([^)]+)\)\W*-->/g ; /**
 * Custom renderer for marked that will be used to transform markdown files to HTML
 * files that can be used in the Angular Material docs.
 */ export class DocsMarkdownRenderer extends Renderer { /**
     * Transforms a markdown heading into the corresponding HTML output. In our case, we
     * want to create a header-link for each H3 and H4 heading. This allows users to jump to
     * specific parts of the docs.
     */ heading ( label , level , _raw ) { if ( level === 3 || level === 4 ) { const headingId = label . toLowerCase ( ) . replace ( whitespaceRegex , '-' ) ; return `
        <h${ level } id="${ headingId }" class="docs-header-link">
          <span header-link="${ headingId }"></span>
          ${ label }
        </h${ level }>
      ` ; } return `<h${ level }>${ label }</h${ level }>` ; } /** Transforms markdown links into the corresponding HTML output. */ link ( href , title , text ) { if ( ! href . startsWith ( 'http' ) && ! href . includes ( 'guide/' ) ) { return super . link ( `guide/${ basename ( href , extname ( href ) ) }` , title , text ) ; } return super . link ( href , title , text ) ; } /**
     * Method that will be called whenever inline HTML is processed by marked. In that case,
     * we can easily transform the example comments into real HTML elements. For example:
     *
     *  `<!-- example(name) -->` turns into `<div material-docs-example="name"></div>`
     */ html ( html ) { html = html . replace ( exampleCommentRegex , ( _match , name ) => `<div material-docs-example="${ name }"></div>` ) ; return super . html ( html ) ; } /**
     * Method that will be called after a markdown file has been transformed to HTML. This method
     * can be used to finalize the content (e.g. by adding an additional wrapper HTML element)
     */ finalizeOutput ( output ) { return `<div class="docs-markdown">${ output }</div>` ; } }