Maintainers
Pricing
Enterprise
More
More
Documentation
Try Live
Rankings
Install
Blog
Docs7
Ask
New
Add Docs
Zenn Editor
https://github.com/zenn-dev/zenn-editor
Admin
Convert markdown to html in Zenn format
Tokens:
12,784
Snippets:
244
Trust Score:
7.9
License:
MIT
Update:
4 months ago
Context
Chat
Benchmark
52
Latest
Show doc for...
Code
Info
Show Results
Tokens:
Raw
Copy
Link
Tokens:
Raw
Copy
Link
### Embedding a GitHub File from a Start Line Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Specify only the starting line for embedding by appending '#L{start}' to the GitHub file URL. ```bash # コードの開始行のみ指定 https://github.com/octocat/Spoon-Knife/blob/main/README.md#L3 ``` -------------------------------- ### Quadratic Formula Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Example of the quadratic formula using TeX notation. ```tex x = - b ± b 2 - 4 a c 2 a . ``` -------------------------------- ### JavaScript Console Log Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Example JavaScript code for logging to the console. ```javascript const var = () => { console.log("hello") } ``` -------------------------------- ### Normal link with javascript path Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Illustrates a link that starts with '/javascript:' which is treated as a relative path, not a protocol. ```markdown [normal link](/javascript:link) ``` -------------------------------- ### Mermaid Gantt Chart Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed a Gantt chart for project timeline visualization. Supports task dependencies and status. ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` -------------------------------- ### Mermaid Sequence Diagram (Simplified) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md A simplified sequence diagram example showing basic actor interactions. ```mermaid sequenceDiagram actor Alice actor Bob Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice ``` -------------------------------- ### XSS Attempt with Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An example showing a potential XSS attempt embedded with a math expression. ```markdown `<script>alert("a")</script>1+1=2$` ``` ```latex <script>alert("a")</script>1+1=2$ ``` -------------------------------- ### Inline Inequality Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An example of an inline mathematical inequality. ```markdown `$1+1<3$` ``` ```latex $1+1<3$ ``` -------------------------------- ### Mermaid Flowchart Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed a basic flowchart using the 'graph TD' syntax. This is useful for visualizing simple directed graphs. ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` -------------------------------- ### Mermaid Sequence Diagram Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed a sequence diagram to illustrate interactions between participants over time. Supports loops and notes. ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` -------------------------------- ### Headings Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use '#' symbols to define heading levels, from 1 to 4. It is recommended to start with H2 for accessibility. ```markdown # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ``` -------------------------------- ### Blockquotes Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Create blockquotes by starting lines with '>'. Multiple lines are treated as a single quote. ```markdown > 引用文 > 引用文 ``` -------------------------------- ### Mermaid Class Diagram Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed a class diagram to show the structure of a system, including classes, attributes, and relationships. ```mermaid classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ``` -------------------------------- ### Diff Syntax Highlighting Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use 'diff' followed by an optional language to highlight differences. Lines starting with '+', '-', ' ', '>', or '<' are highlighted. ```diff @@ -4,6 +4,5 @@ + const foo = bar.baz([1, 2, 3]) + 1; - let foo = bar.baz([1, 2, 3]); ``` -------------------------------- ### Embedding a GitHub File with Line Range Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Specify a range of lines to display by appending '#L{start}-{end}' to the GitHub file URL. ```bash # コードの開始行と終了行を指定 https://github.com/octocat/Spoon-Knife/blob/main/README.md#L1-L3 ``` -------------------------------- ### Mermaid Journey Diagram Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed a journey diagram to visualize user experience or workflow stages. Includes activities and participants. ```mermaid journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me ``` -------------------------------- ### Mermaid ER Diagram Example Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/303-example-embed-mermaid.md Embed an Entity-Relationship diagram to model database structures. Shows entities and their relationships. ```mermaid erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -------------------------------- ### Convert Markdown to HTML Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Use `markdownToHtml` to convert standard Zenn Markdown to HTML. Refer to the Zenn Markdown guide for supported syntax. ```javascript import markdownToHtml from 'zenn-markdown-html'; const html = markdownToHtml(markdown); ``` -------------------------------- ### Table Creation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Create tables using pipes '|' to define columns and hyphens '-' for the header separator. ```markdown | Head | Head | Head | | ---- | ---- | ---- | | Text | Text | Text | | Text | Text | Text | ``` -------------------------------- ### Preview Markdown Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to toggle markdown preview. Press again to return to the editor. ```bash Ctrl + P ``` -------------------------------- ### Save Content Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to save the current markdown content. ```bash Ctrl + S ``` -------------------------------- ### Multiple Inline Math Expressions Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates multiple inline math expressions on the same line. ```markdown `$x$ $y$` ``` ```latex $x$ $y$ ``` -------------------------------- ### Display Math with Align Environment Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode math expression using the \\begin{align} environment for alignment. ```latex $$ \\begin{align} J_w \\ddot{\\theta}_w &= T - \\frac{f}{r} \\ \\end{align} $$ ``` -------------------------------- ### Inline Fraction Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates an inline fraction using LaTeX syntax. ```markdown `$ rac{1}{2}$` ``` ```latex $\\frac{1}{2}$ ``` -------------------------------- ### Table Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a table with a header and rows. ```markdown | Head | Head | Head | | ---- | ---- | ---- | | Text | Text | Text | | Text | Text | Text | ``` -------------------------------- ### Correct Image Path (WebP) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md WebP images are also supported with direct paths. ```markdown  ``` -------------------------------- ### Import Zenn Content CSS Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Import the CSS styles for Zenn content. This should be done to ensure proper rendering of Markdown previews. ```ts import 'zenn-content-css'; ``` -------------------------------- ### Bold Text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to apply bold formatting to selected text. ```bash Ctrl + B ``` -------------------------------- ### Insert List Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to insert a bulleted list. ```bash Ctrl + L ``` -------------------------------- ### Correct Image Path (PNG) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md Use direct paths for PNG images. This is the standard way to include images. ```markdown  ``` -------------------------------- ### Inline Exponent Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates an inline mathematical expression with an exponent. ```markdown `$a^{b}$` ``` ```latex $a^{b}$ ``` -------------------------------- ### Insert Embed Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to open the embed modal for inserting tweets, YouTube, etc. ```bash Ctrl + I ``` -------------------------------- ### Image as a Link Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Make an image clickable by wrapping the image markdown within link markdown. ```markdown [](リンクのURL) ``` -------------------------------- ### Basic Image Insertion Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Insert images using the '!' followed by the URL in parentheses. ```markdown  ``` -------------------------------- ### Embedding a StackBlitz Project Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a StackBlitz project by using the 'Embed URL' provided by StackBlitz. ```markdown @[stackblitz](embed用のURL) ``` -------------------------------- ### Insert Numbered List Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to insert a numbered list. ```bash Ctrl + alt + L ``` -------------------------------- ### Link with file protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Shows a markdown link using the file:/// protocol, which is typically restricted for security reasons. ```markdown [xss link](file:///123) ``` -------------------------------- ### Unsupported Image Extension (SVG) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md SVG images are not supported and will not be rendered. ```markdown  ``` -------------------------------- ### Link Card with @[card] syntax Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use the '@[card](URL)' syntax to explicitly create a link card, especially useful when URLs contain special characters. ```markdown https://zenn.dev/__example__ ``` -------------------------------- ### Insert Text Link Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to insert a text link. ```bash Ctrl + K ``` -------------------------------- ### Text Link Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a text link. ```markdown [アンカーテキスト](リンクのURL) ``` -------------------------------- ### Inline Styles Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for inline italic, bold, strikethrough, and code. ```markdown *イタリック* **太字** ~~打ち消し線~~ インラインで`code`を挿入する ``` -------------------------------- ### Import zenn-markdown-html package Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Import the markdownHtml function from the zenn-markdown-html package. This function can only be executed in Node.js environments. ```tsx import markdownHtml from 'zenn-markdown-html'; ``` -------------------------------- ### Unordered Lists Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Create unordered lists using '-' or '*' for list items. Indentation creates nested lists. ```markdown - Hello! - Hola! - Bonjour! * Hi! ``` -------------------------------- ### Math Block with KaTeX Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Insert block-level mathematical equations using double dollar signs ($$). Ensure surrounding lines are empty for correct rendering. ```katex e^{i\theta} = \cos\theta + i\sin\theta ``` -------------------------------- ### Non-existent Image Path Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md Specifying a path to an image that does not exist will result in a broken image link. ```markdown  ``` -------------------------------- ### Math Block with TeX Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for a math block using TeX notation. ```markdown ```math ``` ``` -------------------------------- ### Image with Alt Text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Provide alternative text for images by placing it in square brackets before the image URL. ```markdown  ``` -------------------------------- ### Message Box Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Create styled message boxes using ':::message'. Use ':::message alert' for warning-style messages. ```markdown :::message メッセージをここに ::: ``` ```markdown :::message alert 警告メッセージをここに ::: ``` -------------------------------- ### Ordered Lists Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use numbers followed by a period to create ordered lists. Items will be automatically numbered. ```markdown 1. First 2. Second ``` -------------------------------- ### Display Math in Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates display math within a markdown code block. ```markdown ``` ${e}_x$ $$e_ alpha$$ ``` ``` ```latex ${e}_x$ $$e_\\alpha$$ ``` -------------------------------- ### Inline Math with KaTeX Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed inline mathematical expressions using single dollar signs ($). ```katex a\ne0 ``` -------------------------------- ### Use Zenn's Embedded Elements with markdownToHtml Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Specify the `embedOrigin` option with the URL of the hosted embed server if you are using embedded features. Zenn's embed server can be used for non-commercial purposes. ```javascript import markdownToHtml from 'zenn-markdown-html'; const html = markdownToHtml(markdown, { embedOrigin: 'https://embed.zenn.studio', }); ``` -------------------------------- ### Embedding a YouTube Video by URL Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Paste the YouTube video URL on its own line, ensuring it's surrounded by newlines, to embed the video. ```bash # YouTubeのURLだけの行（前後に改行が必要です） https://www.youtube.com/watch?v=WRVsOCh907o ``` -------------------------------- ### Heading Levels Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating different levels of headings. ```markdown # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ``` -------------------------------- ### JavaScript code block with custom class Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A standard JavaScript code block with a custom class, demonstrating basic code block rendering. ```js test1; ``` -------------------------------- ### Inline Math Expression Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates a simple inline mathematical expression using single dollar signs. ```markdown `$a$` ``` ```latex $a$ ``` -------------------------------- ### Image with Width Specification Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for inserting an image and specifying its width. ```markdown  ``` -------------------------------- ### Insert Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to insert a code block. ```bash Ctrl + alt + C ``` -------------------------------- ### Inline Math with Spaces Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Shows inline math expressions with spaces. ```markdown `$x$ $` ``` ```latex $x$ $ ``` -------------------------------- ### Linked Image Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a linked image with a specified width. ```markdown [](https://zenn.dev) ``` -------------------------------- ### Dark Theme CSS Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html CSS for a dark theme, setting background and text colors. ```css body[data-theme^='dark'] { /* --c-dark-blue-1100 */ background: #0d223a; /* --c-text-body */ color: #ecf5ff; } .container { max-width: 700px; margin: 1.5rem auto; } ``` -------------------------------- ### Inline Matrix Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Shows how to embed a matrix within an inline math expression. ```markdown `$egin{pmatrix}x\y end{pmatrix}$` ``` ```latex $\\begin{pmatrix}x\\y\\end{pmatrix}$ ``` -------------------------------- ### Message Box Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a message box. ```markdown ! メッセージをここに ! ``` -------------------------------- ### Numbered List Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a nested numbered list. ```markdown 1. First 2. Second ``` -------------------------------- ### URL Specified Image Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md Images can be included using absolute URLs. ```markdown  ``` -------------------------------- ### Undo Action Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Shortcut to undo the last action. ```bash Ctrl + Z ``` -------------------------------- ### Display Matrix in Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode matrix using the \\begin{matrix} environment within a code block. ```markdown ``` $$\\begin{matrix} f & = & 2 + x + 3 \\ & = & 5 + x \\end{matrix}$$ ``` ``` ```latex $$\\begin{matrix} f & = & 2 + x + 3 \\ & = & 5 + x \\end{matrix}$$ ``` -------------------------------- ### Inline Summation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline mathematical expression demonstrating summation notation. ```markdown `$ sum_{i=1}^n$` ``` ```latex $ \\sum_{i=1}^n$ ``` -------------------------------- ### XSS link with vbscript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Demonstrates a markdown link using the vbscript: protocol, which is also a target for XSS prevention. ```markdown [xss link](vbscript:alert(1)) ``` -------------------------------- ### Code Block with Filename Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Display a filename above the code block by specifying 'language:filename' after the opening backticks. ```javascript const great = () => { console.log("Awesome") } ``` -------------------------------- ### Embedding a GitHub File by URL Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Place a GitHub file URL or permalink on its own line to embed the file content. ```bash # GitHubのファイルURLまたはパーマリンクだけの行（前後に改行が必要です） https://github.com/octocat/Hello-World/blob/master/README ``` -------------------------------- ### Blockquote Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a blockquote. ```markdown > 引用文 > 引用文 ``` -------------------------------- ### Warning Box Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a warning message box. ```markdown ! 警告メッセージをここに ! ``` -------------------------------- ### Convert Markdown to Simple HTML Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Use `markdownToSimpleHtml` for converting Markdown to HTML with limited supported syntax, such as basic Markdown formatting and URL conversion. ```javascript import { markdownToSimpleHtml } from 'zenn-markdown-html'; const html = markdownToSimpleHtml(markdown); ``` -------------------------------- ### Display Math Expression (Simple) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A simple display mode mathematical expression. ```markdown `$$1+1=2$$` ``` ```latex $$1+1=2$$ ``` -------------------------------- ### Display Summation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode mathematical expression demonstrating summation notation. ```markdown `$$ sum_{i=1}^n$$` ``` ```latex $$ \\sum_{i=1}^n$$ ``` -------------------------------- ### Image Insertion Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for inserting an image with alt text. ```markdown  ``` -------------------------------- ### Embedding a JSFiddle with Options Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md For JSFiddle embeds with options, use the iframe embed URL format: '{URL}/embedded/{Tabs}/{Visual}/'. ```markdown @[jsfiddle](ページのURL /embedded/{Tabs}/{Visual}/) ``` -------------------------------- ### Markdown reference with javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A markdown reference-style link using the javascript: protocol, testing its sanitization. ```markdown [test]: javascript:alert(1) ``` -------------------------------- ### Bulleted List Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a nested bulleted list. ```markdown - Hello! - Hola! - Bonjour! * Hi! ``` -------------------------------- ### Rendering a Mermaid Flowchart with Chain Notation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Mermaid.js allows grouping nodes using '&' for concise flowcharts. The number of '&' uses is limited to 10 per block. ```mermaid graph LR a --> b & c--> d ``` -------------------------------- ### Embedding a CodeSandbox Project Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a CodeSandbox project by providing the 'src' URL from its iframe embed code. ```markdown @[codesandbox](embed用のURL) ``` -------------------------------- ### Embedding a blueprintUE Render Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a blueprintUE render by providing the URL of the published page. ```markdown @[blueprintue](https://blueprintue.com/render/0ovgynk-/) ``` -------------------------------- ### Inline Math with Tilde and Bold Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression featuring a tilde and bold characters. ```markdown `${ ildeold e}_ alpha$` ``` ```latex ${ \\tilde \\bold e }_\\alpha ``` -------------------------------- ### markdownToHtml Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Converts markdown to HTML with full Zenn syntax support. Supports customization of embedded elements and specifying an embed origin. ```APIDOC ## markdownToHtml ### Description Converts markdown to HTML with full Zenn syntax support. This function is used for Zenn articles, books, and comments. ### Method Signature `markdownToHtml(markdown: string, options?: { customEmbed?: object, embedOrigin?: string }): string` ### Parameters * **markdown** (string) - The markdown string to convert. * **options** (object, optional) - Configuration options. * **customEmbed** (object, optional) - An object to customize the behavior of embedded elements. Refer to Zenn's documentation for supported embeddable elements. * **embedOrigin** (string, optional) - The origin URL of the hosted embed server. Use this if you want to use the same embedded elements as zenn.dev. Only for non-commercial use. ### Request Example ```javascript import markdownToHtml from 'zenn-markdown-html'; const markdown = '# Hello Zenn\n\nThis is a **bold** text.'; const html = markdownToHtml(markdown); console.log(html); ``` ### Custom Embed Example ```javascript import markdownToHtml from 'zenn-markdown-html'; const markdown = ''; const html = markdownToHtml(markdown, { customEmbed: { tweet(url) { // Note: <script src="https://platform.twitter.com/widgets.js" /> cannot be embedded due to sanitization, so it must be embedded elsewhere! return ` <blockquote className="twitter-tweet" data-conversation="${url.includes('conversation=none') ? 'none' : ''}" > <a href="${url}" rel="nofollow noopener noreferrer" target="_blank"> ${url} </a> </blockquote> `; } } }); console.log(html); ``` ### Embed Origin Example ```javascript import markdownToHtml from 'zenn-markdown-html'; const markdown = 'Some content'; const html = markdownToHtml(markdown, { embedOrigin: 'https://embed.zenn.studio' }); console.log(html); ``` ``` -------------------------------- ### Image with Width Specification Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Specify image width by adding '=WIDTHx' after the URL. The 'x' can be omitted if only width is needed. ```markdown  ``` -------------------------------- ### Escaped Dollar Signs in Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates escaping dollar signs within math expressions. ```markdown ``` \$1+1=2$ $1+1=2\$$ ``` ``` ```latex \$1+1=2$ $1+1=2\$ ``` -------------------------------- ### Display Math with Parentheses and Number Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode math expression with parentheses and a number. ```markdown `$$f(x) = x^2 - 1$$ (1)` ``` ```latex $$f(x) = x^2 - 1$$ (1) ``` -------------------------------- ### Rendering a Mermaid Diagram Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use a code block with the language set to 'mermaid' to render diagrams. The syntax follows Mermaid.js specifications. ```mermaid graph TB A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` -------------------------------- ### Whitelisted data-uri for images Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Shows a data-uri used for an image that is allowed because it uses a whitelisted MIME type (e.g., image/gif). ```markdown  ``` -------------------------------- ### Link Card from URL Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md A URL on its own line will automatically render as a link card. This is useful for embedding external content previews. ```markdown https://zenn.dev/zenn/articles/markdown-guide ``` -------------------------------- ### Inline Math with Backslash Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates embedding a backslash within an inline math expression. ```markdown `$a \\$` ``` ```latex $a \\$ ``` -------------------------------- ### Load zenn-embed-elements in React Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Import zenn-embed-elements client-side in React applications, especially if using features like KaTeX. This ensures compatibility as zenn-embed-elements does not support SSR. ```ts import 'zenn-content-css'; export default function App(props) { useEffect(() => { import('zenn-embed-elements'); }, []); return ( <div className="znc" dangerouslySetInnerHTML={{ __html: props.html, // markdownから変換されたHTMLを渡す }} /> ); } ``` -------------------------------- ### Display Matrix with Parentheses in Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode matrix with parentheses using \\begin{pmatrix} within a code block. ```markdown ``` $$\\begin{pmatrix}x_2 \\ y_2 \\end{pmatrix} = \\begin{pmatrix} A & B \\ C & D \\ end{pmatrix}\\cdot \\begin{pmatrix} x_1 \\ y_1 \\ end{pmatrix}$$ ``` ```latex $$\\begin{pmatrix}x_2 \\ y_2 \\end{pmatrix} = \\begin{pmatrix} A & B \\ C & D \\ end{pmatrix}\\cdot \\begin{pmatrix} x_1 \\ y_1 \\ end{pmatrix}$$ ``` -------------------------------- ### Spoiler Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a collapsible spoiler section. ```markdown > 折りたたみ > 折りたたみ ``` -------------------------------- ### Embedding a Figma File or Prototype Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a Figma file or prototype by pasting its shared link. ```markdown @[figma](ファイルまたはプロトタイプのURL) ``` -------------------------------- ### Code Block with Syntax Highlighting Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Insert code blocks using triple backticks. Specify the language after the opening backticks for syntax highlighting. ```javascript const great = () => { console.log("Awesome"); }; ``` -------------------------------- ### Image with Caption Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Add a caption to an image by placing text enclosed in asterisks on the line immediately below the image. ```markdown  *キャプション* ``` -------------------------------- ### Display Math with Bold and Tilde Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode math expression with bold characters and a tilde. ```markdown `$$c{old e}_x = a{old e}_ alpha - b ilde{old e}_ alpha$$` ``` ```latex $$c{\\bold e}_x = a{\\bold e}_\\alpha - b\\tilde{\\bold e}_\\alpha$$ ``` -------------------------------- ### Inline Math with Only Spaces Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Inline math expressions consisting only of spaces. ```markdown ``` $ $ $ x$ $x $ ``` ``` ```latex $ $ $ x$ $x $ ``` -------------------------------- ### markdownToSimpleHtml Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Converts markdown to HTML with a limited set of supported syntax, suitable for fixed messages in publications. ```APIDOC ## markdownToSimpleHtml ### Description Converts markdown to HTML. This function supports a limited set of markdown syntax compared to `markdownToHtml`. ### Method Signature `markdownToSimpleHtml(markdown: string): string` ### Parameters * **markdown** (string) - The markdown string to convert. ### Supported Syntax * Markdown syntax (links, lists, bold/italic) * Paragraph line breaks * Converting URLs to links ### Request Example ```javascript import { markdownToSimpleHtml } from 'zenn-markdown-html'; const markdown = 'This is a *simple* markdown text with a [link](https://example.com).'; const html = markdownToSimpleHtml(markdown); console.log(html); ``` ``` -------------------------------- ### Disallowed data-uri for text/html Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Demonstrates a data-uri with a text/html MIME type, which is typically disallowed to prevent XSS. ```markdown [xss link](data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4K) ``` -------------------------------- ### Blockquote with Inline and Display Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A blockquote containing both inline and display math expressions. ```markdown > see $a = b + c$ > $c^2=a^2+b^2$ (2) > $c^2=a^2+b^2$ ``` ```latex > see $a = b + c$ > $c^2=a^2+b^2$ (2) > $c^2=a^2+b^2$ ``` -------------------------------- ### Code Block with Syntax Highlighting Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for a code block with language-specified syntax highlighting. ```markdown ```js ``` ``` -------------------------------- ### Details Block with Inline Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression contained within a details/summary block. ```markdown :::details 詳細 $a\ne0$ ::: ``` ```latex $a\ne0$ ``` -------------------------------- ### Embedding a SlideShare Presentation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a SlideShare presentation by providing the 'key' from its embed code. ```markdown @[slideshare](スライドのkey) ``` -------------------------------- ### Customizing CodePen Embed Tab Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Change the default displayed tab for a CodePen embed by adding '?default-tab={tabname}' to the URL. ```markdown @[codepen](ページのURL?default-tab=html,css) ``` -------------------------------- ### Load Embed Script Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Load the embed event listener script in the head tag to enable embedded content like Tweets and Mermaid diagrams. Avoid using defer or async attributes to prevent issues with SPA page transitions. ```html <script src="https://embed.zenn.studio/js/listen-embed-event.js"></script> ``` -------------------------------- ### Incorrect Image Path Specification (Relative) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/books/chapter-by-filename/4.exmple-images.md Relative paths are not supported for images within the Zenn project. This will result in the image not being displayed. ```markdown  ``` -------------------------------- ### XSS image with javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Tests if the image parser, sharing code with the link parser, correctly handles javascript: protocols. ```markdown >) ``` -------------------------------- ### Basic Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for a basic code block. ```markdown ``` ``` ``` -------------------------------- ### XSS link with uppercase VBSCRIPT protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Tests the sanitizer's case-insensitivity for the vbscript: protocol in markdown links. ```markdown [xss link](VBSCRIPT:alert(1)) ``` -------------------------------- ### Accordion (Toggle) Box Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Create collapsible content sections using ':::details Title'. Nested elements can be added using '::::details Title'. ```markdown :::details タイトル 表示したい内容 ::: ``` ```markdown ::::details タイトル :::message ネストされた要素 ::: :::: ``` -------------------------------- ### XSS link with script tag injection Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Demonstrates an attempt to inject a script tag directly into a markdown link, which should be neutralized. ```markdown [xss link]("><script>alert("xss")</script>) ``` -------------------------------- ### Incorrect Image Path (Relative Path) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/200-example-images.md Relative paths are not supported for images in the Zenn editor. ```markdown  ``` -------------------------------- ### XSS link with javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Shows a markdown link attempting to use the javascript: protocol, which should be disallowed by the sanitizer. ```markdown [xss link](javascript:alert(1)) ``` -------------------------------- ### Numbered List with Inline Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A numbered list where list items contain inline math expressions. ```markdown ``` 1. $1+2$ 2. $2+3$ 1. $3+4$ ``` ``` ```latex 1. $1+2$ 2. $2+3$ 1. $3+4$ ``` -------------------------------- ### XSS link with uppercase JAVASCRIPT protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Tests the sanitizer's case-insensitivity for the javascript: protocol in markdown links. ```markdown [xss link](JAVASCRIPT:alert(1)) ``` -------------------------------- ### Autolink with direct javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md An autolink directly using the javascript: protocol, which should be sanitized. ```html <javascript:alert(1)> ``` -------------------------------- ### Display Math in Code Block (Multiline) Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A multiline display math expression within a code block. ```markdown ``` $$ 1+1=2 $$ ``` ```latex $$ 1+1=2 $$ ``` -------------------------------- ### Render HTML in React Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Render the converted HTML within a React component. The parent div must have the class 'znc' for Zenn's CSS to be applied. ```tsx <div // "znc"というクラス名を指定する className="znc" // htmlを渡す dangerouslySetInnerHTML={{ __html: html, }} /> ``` -------------------------------- ### Horizontal Rule Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-content-css/test.html Markdown syntax for creating a horizontal rule. ```markdown ----- ``` -------------------------------- ### Mixed Inline and Display Math in Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A code block containing a mix of inline and display math expressions. ```markdown ``` a$1+1=2$ $1+1=2$b c$x$d ``` ``` ```latex a$1+1=2$ $1+1=2$b c$x$d ``` -------------------------------- ### Code with Display Math and Number Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A code block containing text followed by a display math expression and a number. ```markdown ``` code ``` $$a+b$$ (1) ``` ```latex code $$ a+b $$ (1) ``` -------------------------------- ### Inline Greek Letter Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Shows how to embed a Greek letter like phi within an inline math expression. ```markdown `$\varphi$` ``` ```latex $\\varphi$ ``` -------------------------------- ### Embedding a SpeakerDeck Presentation Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed a SpeakerDeck presentation by providing the 'data-id' value from its embed code. ```markdown @[speakerdeck](スライドのID) ``` -------------------------------- ### Blockquote with Display Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A blockquote containing a display math expression. ```markdown > formula > > $$ a+b=c$$ (2) > > in blockquote. ``` ```latex > formula > > $$ a+b=c$$ (2) > > in blockquote. ``` -------------------------------- ### Long Inline Math Expression Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Demonstrates a very long inline mathematical expression that might cause overflow issues. ```latex $aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa$ ``` -------------------------------- ### Autolink with encoded javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Shows an autolink containing an encoded javascript: protocol, testing entity decoding before parsing. ```html <javascript:alert(1)> ``` -------------------------------- ### Code with Display Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A code block containing text followed by a display math expression. ```markdown ``` code ``` $$a+b$$ ``` ```latex code $$ a+b $$ ``` -------------------------------- ### Display Math Expression Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode mathematical expression using double dollar signs. ```markdown `$$e_ alpha$$` ``` ```latex $$e_\\alpha$$ ``` -------------------------------- ### Code block with script tag and text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A generic code block containing an HTML script tag and surrounding text. ```text <script>alert("xss")</script> hello ``` -------------------------------- ### Convert Markdown to HTML Source: https://github.com/zenn-dev/zenn-editor/blob/canary/README.md Convert a Markdown string to an HTML string using the imported markdownHtml function. Ensure the parent element has the class 'znc' for CSS to apply correctly. ```ts const html = markdownHtml(markdown); ``` -------------------------------- ### HTML Comment for Notes Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Use HTML comment syntax <!-- comment --> for private notes. These will not be displayed on the published page. ```html <!-- TODO: ◯◯について追記する --> ``` -------------------------------- ### X (Twitter) Post Embed Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Embed an X (Twitter) post by placing its URL on a line by itself, ensuring it's surrounded by blank lines. ```bash # ポストのURLだけの行（前後に改行が必要です） https://twitter.com/jack/status/20 ``` -------------------------------- ### Embedding a Specific GitHub Gist File Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md To embed a particular file from a GitHub Gist, append '?file={filename}' to the Gist URL. ```markdown @[gist](https://gist.github.com/foo/bar?file=example.json) ``` -------------------------------- ### Linkifier with direct javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A direct javascript: protocol used with the linkifier, which should be sanitized. ```text javascript:alert(1) ``` -------------------------------- ### Inline Math with Asterisk Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression containing an asterisk. ```markdown `$a^*b$ with $a^*$` ``` ```latex $a^*b$ with $a^*$ ``` -------------------------------- ### Inline Math with Leading/Trailing Text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression surrounded by text. ```markdown `If you solve $1+2$ you get $3` ``` ```latex If you solve $1+2$ you get $3 ``` -------------------------------- ### Multiline Inline Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression that spans multiple lines. ```markdown ``` $1+1= 2$ ``` ``` ```latex $1+1= 2$ ``` -------------------------------- ### Display Summation with Number Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode summation expression with an associated number. ```markdown `$$ sum_{i=1}^n$$ (2)` ``` ```latex $$ \\sum_{i=1}^n$$ (2) ``` -------------------------------- ### Display Vector in Code Block Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A display mode vector expression within a code block. ```markdown ``` $${old e}(\varphi) = \begin{pmatrix} \cos\varphi\\ \sin\varphi \end{pmatrix}$$ (3) ``` ``` ```latex $${\\bold e}(\\varphi) = \\begin{pmatrix} \\cos\\varphi\\ \\sin\\varphi \\end{pmatrix}$$ (3) ``` -------------------------------- ### Embedding a Tweet by URL Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Simply paste the tweet's URL on its own line to embed it. Previously, a specific syntax was required, but now direct URL pasting works. ```markdown https://x.com/jack/status/20 ``` -------------------------------- ### Linkifier with encoded javascript protocol Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Tests the linkifier's handling of an encoded javascript: protocol. ```text javascript:alert(1) ``` -------------------------------- ### Inline HTML with onerror attribute Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Demonstrates an XSS vulnerability using an inline image tag with an onerror attribute. This is typically blocked by sanitizers. ```html <img/src=./ onerror=alert(location)> ``` -------------------------------- ### Raw HTML script tag Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A raw HTML script tag within a fenced code block, which should be rendered as code, not executed. ```html <script>alert("xss")</script> ``` -------------------------------- ### Long Display Math Expression Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md A long display mode mathematical expression designed to test horizontal scrolling. ```latex $$ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa $$ ``` -------------------------------- ### Customize Embedded Elements with markdownToHtml Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/README.md Customize the behavior of embedded elements like tweets using the `customEmbed` option. Note that script tags for embedding may need to be handled separately. ```javascript import markdownToHtml from 'zenn-markdown-html'; const html = markdownToHtml(markdown, { customEmbed: { // @[tweet](...)に対応している埋め込み要素をカスタマイズする tweet(url) { // 注意: サニタイズによって<script src="https://platform.twitter.com/widgets.js" />は埋め込めないので、別の場所で埋め込み必要があります！ return ` <blockquote className="twitter-tweet" data-conversation="${ src.split(/&|\?/).includes('conversation=none') ? 'none' : '' }" > <a href="${url}" rel="nofollow noopener noreferrer" target="_blank"> ${url} </a> </blockquote> `; }, }, }); ``` -------------------------------- ### Footnotes Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Define footnotes using '[^identifier]' in the text and the footnote content at the bottom using '[^identifier]: content'. Inline footnotes are also supported. ```markdown 脚注の例[^1]です。インライン^[脚注の内容その2]で書くこともできます。 [^1]: 脚注の内容その1 ``` -------------------------------- ### JavaScript code block with script tag and text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A JavaScript-specific code block containing an HTML script tag and text. ```js <script>alert("xss")</script> hello; ``` -------------------------------- ### Handling URLs with Underscores in Tweets Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md If a tweet URL contains multiple underscores within path segments, auto-linking might break. Use the @[tweet](URL) syntax as a workaround. ```markdown https://twitter.com/__example__/status/12345678910 ``` -------------------------------- ### Inline Math within Text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md An inline math expression embedded within a phrase. ```markdown `so-what is $x$` ``` ```latex so-what is $x$ ``` -------------------------------- ### XSS link with encoded characters Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md Tests the sanitizer's ability to decode HTML entities before processing links, preventing bypasses. ```markdown [xss link](&#74;avascript:alert(1)) ``` -------------------------------- ### Horizontal Rule Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md Insert a horizontal rule (separator) using four or more hyphens. ```markdown ---- ``` -------------------------------- ### Inline Math Embedded in Text Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Shows an inline math expression embedded within a sentence. ```markdown `You get 3$ if you solve $1+2$` ``` ```latex You get 3$ if you solve $1+2$ ``` -------------------------------- ### JavaScript code block with colon and script tag Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A JavaScript code block with a colon in its identifier, followed by an HTML script tag. ```js :<script>alert("xss")</script> hello ``` -------------------------------- ### Escaped Dollar Sign in Text with Display Math Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/304-example-embed-katex.md Shows an escaped dollar sign within text preceding a display math expression. ```markdown ``` some text \$a+b=c$$ ``` ``` ```latex some text \$a+b=c$$ ``` -------------------------------- ### JavaScript code block with non-standard character Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/800-example-xss-check.md A JavaScript code block containing a non-standard character (form feed), testing parser robustness. ```js test2 ``` -------------------------------- ### Embedding a Tweet without Conversation History Source: https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-cli/articles/100-example-markdown-guide.md To embed a tweet and hide its reply thread, append '?conversation=none' to the tweet's URL. ```markdown https://twitter.com/jack/status/20?conversation=none ```
