<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="365691" data-post-id="365691">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks! Yep you can create either provide your own <code>%Autumn.Theme{}</code> or modify existing ones, for example:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">%{highlights: highlights} = theme = Autumn.Theme.get("github_dark")
red_text_style = %Autumn.Theme.Style{fg: "red"}
highlights = Map.put(highlights, "string", red_text_style)
theme = Map.put(theme, :highlights, highlights)
</code></pre>
<p>Then format using that theme:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">MDEx.to_html!("""
```elixir
String.upcase("elixir")
```
""",
syntax_highlight: [formatter: {:html_inline, theme: theme}])
</code></pre>
<p>You’ll see <code>&lt;span style="color: red;"&gt;&amp;quot;elixir&amp;quot;&lt;/span&gt;</code> in the output.</p>
<p>I should probably implement the Access behaviour to let you just call <code>put_in(theme, [...], value)</code> <img src="https://forum.elixirforum.com/images/emoji/apple/laughing.png?v=15" title=":laughing:" class="emoji" alt=":laughing:" loading="lazy" width="20" height="20"></p>
<p>EDIT: Autumn is another library, you can find docs at <a href="https://hexdocs.pm/autumn/Autumn.html" class="inline-onebox" rel="noopener nofollow ugc">Autumn — Autumn v0.7.0</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="365691" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-365691" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="365691"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="365696" data-post-id="365696">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="greven" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/greven/120/25004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  greven
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey Leandro!</p>
<p>I saw that Autumn was Rust based so didn’t get that it was written by you, too!</p>
<p>Thanks for the recipe! I see that there is an issue regarding custom themes so didn’t think I it was possible. Obrigado! <img src="https://forum.elixirforum.com/images/emoji/apple/star_struck.png?v=15" title=":star_struck:" class="emoji" alt=":star_struck:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="365696" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-365696" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="365696"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="365698" data-post-id="365698">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That Rust crate is required to call all tree-sitter bindings. Autumn is a “client” of that crate and finally MDEx makes use of both since it requires both Elixir and Rust. I know it’s a bit confusing but it was the best way I found to maintain all pieces together. De nada!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="365698" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-365698" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="365698"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="370114" data-post-id="370114">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hello! One more update. Now mdex supports code block decorators, ie: you can add metadata in the code fence info string to overwrite theme, highlight colors, etc. See examples below and docs at <a href="https://hexdocs.pm/mdex/MDEx.html#module-code-block-decorators" class="inline-onebox" rel="noopener nofollow ugc">MDEx — MDEx v0.13.2</a></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/2/92c98ff157ef7a5353fbc096f826dbbe45156f99.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/92c98ff157ef7a5353fbc096f826dbbe45156f99" title="theme" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/2/92c98ff157ef7a5353fbc096f826dbbe45156f99_2_525x600.jpeg" alt="theme" data-base62-sha1="kWxysLCRIkrHP2MBDf1PSdbgvzj" width="525" height="600" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/2/92c98ff157ef7a5353fbc096f826dbbe45156f99_2_525x600.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/9/2/92c98ff157ef7a5353fbc096f826dbbe45156f99_2_787x900.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/9/2/92c98ff157ef7a5353fbc096f826dbbe45156f99_2_1050x1200.jpeg 2x" data-dominant-color="585854"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">theme</span><span class="informations">1200×1371 38 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/c/9c06274b4d0817ad2f3bd4d91b391e31470086ad.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/9c06274b4d0817ad2f3bd4d91b391e31470086ad" title="lines" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/c/9c06274b4d0817ad2f3bd4d91b391e31470086ad_2_525x600.jpeg" alt="lines" data-base62-sha1="mgfFum6RFYuXlSfcg0JHT60ZuaN" width="525" height="600" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/c/9c06274b4d0817ad2f3bd4d91b391e31470086ad_2_525x600.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/9/c/9c06274b4d0817ad2f3bd4d91b391e31470086ad_2_787x900.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/9/c/9c06274b4d0817ad2f3bd4d91b391e31470086ad_2_1050x1200.jpeg 2x" data-dominant-color="35373E"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">lines</span><span class="informations">1200×1371 41.6 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="370114" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-370114" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="370114"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="374981" data-post-id="374981">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a href="https://hexdocs.pm/mdex/changelog.html" rel="noopener nofollow ugc">MDEx v0.9</a> is now available with some new cool features!</p>
<h3><a name="p-374981-delta-format-1" class="anchor" href="#p-374981-delta-format-1" aria-label="Heading link" rel="nofollow"></a>Delta format</h3>
<p>Thanks to <a class="mention" href="/u/jskalc" rel="nofollow">@Jskalc</a> we can now convert Markdown to <a href="https://quilljs.com/docs/delta/" rel="noopener nofollow ugc">Delta</a>:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/a/d/ad6774185308c84462d57951e782a1f6b2eaa665.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/ad6774185308c84462d57951e782a1f6b2eaa665" title="mdex_delta.exs" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/a/d/ad6774185308c84462d57951e782a1f6b2eaa665.jpeg" alt="mdex_delta.exs" data-base62-sha1="oK0fwQD6TKPumYZvwkWIaEUKlTL" width="690" height="255" data-dominant-color="483D56"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">mdex_delta.exs</span><span class="informations">1200×445 27.9 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<h3><a name="p-374981-streaming-2" class="anchor" href="#p-374981-streaming-2" aria-label="Heading link" rel="nofollow"></a>Streaming</h3>
<p>Initial (experimental) support to put incomplete fragments of Markdown into the document. Useful for AI/LLM tools:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/f/1/f1aa70cd7a744af3f3eef05d385b76800fa0d38d.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/f1aa70cd7a744af3f3eef05d385b76800fa0d38d" title="mdex_streaming.exs" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/f/1/f1aa70cd7a744af3f3eef05d385b76800fa0d38d_2_690x253.jpeg" alt="mdex_streaming.exs" data-base62-sha1="ytSeJVKACorOoeDZNWc2SzXfWON" width="690" height="253" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/f/1/f1aa70cd7a744af3f3eef05d385b76800fa0d38d_2_690x253.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/f/1/f1aa70cd7a744af3f3eef05d385b76800fa0d38d_2_1035x379.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/f/1/f1aa70cd7a744af3f3eef05d385b76800fa0d38d_2_1380x506.jpeg 2x" data-dominant-color="453C53"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">mdex_streaming.exs</span><span class="informations">3024×1112 137 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>You can see a demo (video) at <a href="https://x.com/leandrocesquini/status/1974460068054843575" class="inline-onebox" rel="noopener nofollow ugc">Leandro Pereira on X: "Here's a short demo of Markdown streaming in MDEx 👀 Note it's still experimental and disabled by default. https://t.co/uEdEEalbb8" / X</a></p>
<h3><a name="p-374981-inspect-document-as-a-tree-3" class="anchor" href="#p-374981-inspect-document-as-a-tree-3" aria-label="Heading link" rel="nofollow"></a>Inspect Document as a tree</h3>
<p>To help visualize the nodes in a document:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/5/e/5e83e9711bca0ef81a7ab134263823f1ffaf101b.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/5e83e9711bca0ef81a7ab134263823f1ffaf101b" title="mdex_display.exs" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/5/e/5e83e9711bca0ef81a7ab134263823f1ffaf101b_2_690x388.jpeg" alt="mdex_display.exs" data-base62-sha1="du7v8aKJDHSqIIjlMMcyBol7q9J" width="690" height="388" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/5/e/5e83e9711bca0ef81a7ab134263823f1ffaf101b_2_690x388.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/5/e/5e83e9711bca0ef81a7ab134263823f1ffaf101b_2_1035x582.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/5/e/5e83e9711bca0ef81a7ab134263823f1ffaf101b_2_1380x776.jpeg 2x" data-dominant-color="463C56"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">mdex_display.exs</span><span class="informations">2140×1204 93.3 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>It can be disabled if you prefer the regular struct inspect.</p>
<h3><a name="p-374981-unified-document-api-4" class="anchor" href="#p-374981-unified-document-api-4" aria-label="Heading link" rel="nofollow"></a>Unified Document API</h3>
<p>Removed the <code>MDEx.Pipe</code> module in favor of unifying all operations in the <code>MDEx.Document</code>. Note this is a <strong>breaking</strong> change:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/1/9/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51" title="mdex_pipeline.exs" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/1/9/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51_2_690x169.jpeg" alt="mdex_pipeline.exs" data-base62-sha1="3F3UHPKaEhyxT96FxsPVIx02HOV" width="690" height="169" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/1/9/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51_2_690x169.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/1/9/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51_2_1035x253.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/1/9/19aad1a5583d5d4ee46f91a5c5e43fda20ebbd51_2_1380x338.jpeg 2x" data-dominant-color="4C415E"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">mdex_pipeline.exs</span><span class="informations">2696×664 67.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>I’ll be working on <a href="https://github.com/kivikakk/comrak/issues/571" class="inline-onebox" rel="noopener nofollow ugc">Support Phoenix tags? · Issue #571 · kivikakk/comrak · GitHub</a> so we can (hopefully) get Elixir and Phoenix components rendering inside Markdown. Enjoy!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="374981" data-batch-url="/posts/batch_likers">
                        13
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-374981" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="374981"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="381727" data-post-id="381727">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="greven" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/greven/120/25004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  greven
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/leandrocp" rel="nofollow">@leandrocp</a> With the release of 0.11, thanks for that of course! I can, as shown in the docs, use the sigil to render Markdown and Phoenix components, but I can’t figure out, how to do the same when the Phoenix Component is inside a markdown file (I am using NimblePublisher). So, extending this example: <a href="https://github.com/leandrocp/mdex/blob/main/examples/nimble_publisher.livemd" class="inline-onebox" rel="noopener nofollow ugc">mdex/examples/nimble_publisher.livemd at main · leandrocp/mdex · GitHub</a> to support markdown files with components. I have added the `phoenix_heex: true` to the extension options to pass it to `MDEx.to_html!`.</p>
<p>I see that the resulting MDex.Document parses the specific line of the component as an heex_block, but then the literal is the component itself.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">[heex_block] node: “SiteWeb.BlogComponents.article_image”, literal: “&lt;SiteWeb.BlogComponents.article_image image=“hollow_knight.jpg” alt=“Hollow Knight” /&gt;\n”
</code></pre>
<p>Any pointers? Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="381727" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-381727" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="381727"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="381733" data-post-id="381733">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi <a class="mention" href="/u/greven" rel="nofollow">@greven</a> in this case you have to evaluate the template and convert the result to the final HTML binary. Here’s an example: <a href="https://github.com/leandrocp/mdex/commit/2c127d568c544bf53db3d538e1ff9891561b8ec2" class="inline-onebox" rel="noopener nofollow ugc">docs: nimble_publisher with phoenix components · leandrocp/mdex@2c127d5 · GitHub</a></p>
<p>I’m not sure yet how to make it more convenient to use. Adding <code>to_heex</code> to return <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Rendered.html" rel="noopener nofollow ugc">Phoenix.LiveView.Rendered</a> is a potential solution but calling <code>Code.eval_quoted</code> is slow and I’d rather avoid encouraging it, on the other hand the <code>~MD</code> sigil won’t work in some situations.</p>
<p>/edit slow at runtime*</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="381733" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-381733" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="381733"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="381763" data-post-id="381763">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>MDEx v0.11 is out with 2 new cool features:</p>
<ol>
<li>Initial support for Phoenix Components</li>
</ol>
<p>Now you can render Phoenix Components inside Markdow, either inside a LiveView or just use the <code>~MD[...]HEEX</code> sigil. Example:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def render(assigns) do
  ~MD"""
  Hello from MDEx :wave:

  Today is _{Calendar.strftime(DateTime.utc_now(), "%B %d, %Y")}_

  &lt;ReqEmbed.embed url={@video_url} class="aspect-video rounded-xl my-6" /&gt;

  Built with:
  - &lt;.link href="https://crates.io/crates/comrak"&gt;comrak&lt;/.link&gt;
  - &lt;.link href="https://hex.pm/packages/mdex"&gt;MDEx&lt;/.link&gt;
  """HEEX
end
</code></pre>
<p>More info at <a href="https://hexdocs.pm/mdex/phoenix_live_view_heex.html" class="inline-onebox" rel="noopener nofollow ugc">Phoenix LiveView HEEx — MDEx v0.13.2</a></p>
<ol start="2">
<li>Syntax Highlighter with Light/Dark themes</li>
</ol>
<p>The syntax highlighting engine now supports dual/multi themes so you can have automatic light/dark themes:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">options = [
  syntax_highlight: [
    formatter: {
      :html_multi_themes,
      themes: [light: "github_light", dark: "github_dark"],
      default_theme: "light-dark()"
    }
  ]
]
</code></pre>
<p>Full example at <a href="https://hexdocs.pm/mdex/light_dark_theme.html" class="inline-onebox" rel="noopener nofollow ugc">Lumis light/dark theme — MDEx v0.13.2</a></p>
<hr>
<p>I’m also opening a sponsorship program if you want to support MDEx in that way please see <a href="https://github.com/leandrocp/mdex?tab=readme-ov-file#sponsors" class="inline-onebox" rel="noopener nofollow ugc">GitHub - leandrocp/mdex: Markdown for Elixir. Fast, Extensible, Phoenix-native. AI-ready. Built on top of comrak, ammonia, and lumis. · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="381763" data-batch-url="/posts/batch_likers">
                        10
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-381763" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="381763"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="382158" data-post-id="382158">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="leandrocp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/leandrocp/120/38111_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  leandrocp
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>MDEx v0.11.1 is out bringing some fixes and improvements:</p>
<ul>
<li>Sigil docs fix by <a class="mention" href="/u/gmile" rel="nofollow">@gmile</a></li>
<li>Optional <code>:rustler</code> dep by <a class="mention" href="/u/halostatue" rel="nofollow">@halostatue</a></li>
<li>Accept <code>:plugins</code> opt by <a class="mention" href="/u/scrogson" rel="nofollow">@scrogson</a></li>
<li><a href="https://hexdocs.pm/mdex/heex.html" rel="noopener nofollow ugc">HEEx guide</a></li>
<li>A <code>to_heex/2</code> function to help working with heex templates</li>
</ul>
<p>Release and checksums at <a href="https://github.com/leandrocp/mdex/releases/tag/v0.11.1" class="inline-onebox" rel="noopener nofollow ugc">Release v0.11.1 · leandrocp/mdex · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="382158" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-382158" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="382158"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="382190" data-post-id="382190">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tcoopman" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tcoopman/120/8112_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tcoopman
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>If I need to pass options to MDEx, can I still use the sigil <code>MD</code> or should I use to_heex in that case?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="382190" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mdex-fast-and-extensible-markdown/70540/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-382190" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="382190"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/70540/load_more?page=3">Load more posts (4 remaining)</a>
</div></template></turbo-stream>