markdown.component.html

<mat-card>
  <mat-card-title>Markdown</mat-card-title>
  <mat-card-subtitle>Parse markdown code</mat-card-subtitle>
  <mat-divider></mat-divider>
  <mat-card-content>
    With this component you can easily write inline markdown, or alternatively you can sanitize and load external markdown (.md) files.
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-title>Basic example</mat-card-title>
  <mat-card-subtitle>Headings, lists &amp; paragraphs</mat-card-subtitle>
  <mat-divider></mat-divider>
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <td-markdown>
          # Heading (H1) 

          ## Sub Heading (H2)

          ### Steps (H3)

          ###List Items

          * One
          * Two
          * Three
              * 4 extra spaces for nested lists
                  * Another 4 spaces for a nested list

          Emphasis, aka italics, with *asterisks* or _underscores_.

          Strong emphasis, aka bold, with **asterisks** or __underscores__.

          Combined emphasis with **asterisks and _underscores_**.
        </td-markdown>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <td-highlight lang="html">
          <![CDATA[
            <td-markdown>
              # Heading (H1) 
                    
              ## Sub Heading (H2)

              ### Steps (H3)
                  
              ###List Items

              * One
              * Two
              * Three
                * 4 extra spaces for nested lists
                    * Another 4 spaces for a nested list

              Emphasis, aka italics, with *asterisks* or _underscores_.

              Strong emphasis, aka bold, with **asterisks** or __underscores__.

              Combined emphasis with **asterisks and _underscores_**.
            </td-markdown>
          ]]>
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-title>Links &amp; Images</mat-card-title>
  <mat-card-subtitle>There are two ways to create links, inline &amp; reference</mat-card-subtitle>
  <mat-divider></mat-divider>
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3>Links &amp; Images</h3>
        <p>There are two ways to create links. Inline & reference:</p>
        <td-markdown>
          [I'm an inline-style link](https://teradata.github.io/)

          [I'm a reference-style link case does not matter][Teradata Github Landing]

          [teradata github Landing]: https://teradata.github.io/

          Inline image
          ![alt text here](assets/icons/teradata-dark.svg)

          Reference-style image:
          ![alt text][logo]

          [logo]: assets/icons/teradata-dark.svg "Teradata Labs"
        </td-markdown>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <td-highlight lang="html">
          <![CDATA[
            <td-markdown>
              [I'm an inline-style link](https://teradata.github.io/)

              [I'm a reference-style link case does not matter][Teradata Github Landing]

              [teradata github Landing]: https://teradata.github.io/

              Inline image
              ![alt text here](assets/icons/teradata-dark.svg)

              Reference-style image:
              ![alt text][logo]

              [logo]: assets/icons/teradata-dark.svg "Teradata Labs"
            </td-markdown>
          ]]>
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Inline Code &amp; Snippets</mat-card-title>
  <mat-card-subtitle>Code blocks</mat-card-subtitle>
  <mat-divider></mat-divider>
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <p>Inline has `back-ticks` around it.</p>
        <p>Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. </p>
        <td-markdown>
          `this is an inline code snippet`

          ```javascript
          var s = "JavaScript syntax highlighting";
          alert(s);
          ```

          ```python
          s = "Python syntax highlighting"
          print s
          ```
        </td-markdown>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <td-highlight lang="html">
          <![CDATA[
            <td-markdown>
              `this is an inline code snippet`

              ```javascript
              var s = "JavaScript syntax highlighting";
              alert(s);
              ```

              ```python
              s = "Python syntax highlighting"
              print s
              ```
            </td-markdown>
          ]]>
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Block Quotes &amp; Dividers</mat-card-title>
  <mat-divider></mat-divider>
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3>Blockquotes</h3>
        <td-markdown>
          > Blockquotes are very handy in email to emulate reply text.
          > This line is part of the same quote.

          Quote break.

          > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
        </td-markdown>
        <h3>Dividers</h3>
        <td-markdown>
          Three or more...

          ---

          Hyphens

          ***

          Asterisks

          ___

          Underscores
        </td-markdown>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <td-highlight lang="html">
          <![CDATA[
            <td-markdown>
              > Blockquotes are very handy in email to emulate reply text.
              > This line is part of the same quote.

              Quote break.

              > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
            </td-markdown>
          ]]>
        </td-highlight>
        
        <td-highlight lang="html">
          <![CDATA[
            <td-markdown>
              Three or more...

              ---

              Hyphens

              ***

              Asterisks

              ___

              Underscores
            </td-markdown>
          ]]>
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<td-readme-loader resourceUrl="platform/markdown/README.md"></td-readme-loader>