1. Top
  2. slack-message-parser
  3. Files
  4. examples
  5. index.html
slack-message-parser

JavaScript library for parsing Slack message format (mrkdwn)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29 

    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Security-Policy" content="default-src 'self';frame-src https://codesandbox.io;style-src https://pocka.github.io/slack-message-parser/styles.css https://rsms.me/inter/ https://cdn.jsdelivr.net/npm/hack-font@3.3.0/;font-src https://rsms.me/inter/ https://cdn.jsdelivr.net/npm/hack-font@3.3.0/" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://rsms.me/inter/inter.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" rel="stylesheet" />
<title>Examples | slack-message-parser</title>
        <link rel="stylesheet" href="/slack-message-parser/styles.css" />
      </head>
      <!--
        This site is generated using nano-jsx SSR, lightning-css, remark/rehype, Prism, and Deno.
        Source code at https://github.com/pocka/slack-message-parser/tree/master/docs/site/
      -->
      <body>
        <div class="layout__logo-wrapper  layout__header"><a class="layout__logo" href="/slack-message-parser/">slack<br />message<br />parser</a></div><nav class="layout__nav  layout__header"><ul class="nav__list"><li><a class="nav__link" href="/slack-message-parser/">Intro</a></li><li><a class="nav__link" href="/slack-message-parser/installation/">Install</a></li><li><a class="nav__link" href="/slack-message-parser/api/">API</a></li><li><a class="nav__link" href="/slack-message-parser/examples/">Examples</a></li><li><a class="nav__link" href="https://github.com/pocka/slack-message-parser">GitHub</a></li></ul></nav><div class="layout__header-fill  layout__header"></div><aside class="layout__toc"><div class="toc__root"><nav class="toc"><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h1"><a class="toc-link toc-link-h1" href="#examples">Examples</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#html--typescript">HTML + TypeScript</a></li><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#react--typescript">React + TypeScript</a></li></ol></li></ol></nav></div></aside><main class="layout__main"><div><noscript><div class="pages_examples__alert">This page does not work with JavaScript disabled.</div></noscript><div class="markdown__root"><h1 id="examples">Examples</h1>
<h2 id="html--typescript">HTML + TypeScript</h2>
<p>This example shows the most basic usage of the library.
The code handles only a limited set of node type for demonstration purpose.</p>
<iframe src="https://codesandbox.io/embed/gracious-rgb-kmqbu?fontsize=14&module=%2Fsrc%2Findex.ts&view=editor" loading="lazy" title="Plain HTML with TypeScript example" allow="" sandbox="allow-popups allow-scripts allow-same-origin"></iframe>
<h2 id="react--typescript">React + TypeScript</h2>
<p>This example shows how to construct React node without using <code>dangerouslySetInnerHTML</code>.
The code handles only a limited set of node type for demonstration purpose.</p>
<iframe src="https://codesandbox.io/embed/condescending-heyrovsky-y5jw3?fontsize=14&module=%2Fsrc%2FSlackMessage.tsx" loading="lazy" title="React with TypeScript example" allow="" sandbox="allow-popups allow-scripts allow-same-origin"></iframe></div></div></main>
        
      </body>
    </html>