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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think it’s basically what <a class="mention" href="/u/exadra37" rel="nofollow">@Exadra37</a> has mentioned:<br>
I’d like to be able to use function components inside markdown.</p>
<p>This, to ease my life when writing blog posts.</p>
<p>Later, I’d like to be able to add live LiveView examples (like using live_component) inside my posts for doing interactive tutorials and stuff.</p>
<p>My blog uses Phoenix + LiveView ATM, with all the content being written in markdown.</p>
<p>So I was planning a post on custom form inputs, and explain how to handle those in LiveView, I’d be fantastic for it to be interactive instead of relying on static pictures and source code.</p>
<p>Do you think this sounds possible or would it require an insane effort to be realized?</p>
<p>If pointed in the right direction, I wouldn’t mind investing my own time in improving tooling for blog tech.<br>
(That’s something that’s been on my mind for some time now).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319873" 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/implementing-custom-markdown-parser-with-the-md-library/55025/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-319873" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319873"
                     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="319874" data-post-id="319874">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I do something like that on my blog. See <a href="https://github.com/LostKobrakai/kobrakai_elixir" class="inline-onebox" rel="nofollow">GitHub - LostKobrakai/kobrakai_elixir · GitHub</a> for how it‘s implemented.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319874" 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/implementing-custom-markdown-parser-with-the-md-library/55025/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-319874" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319874"
                     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="319876" data-post-id="319876">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="mudasobwa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mudasobwa/120/5298_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  mudasobwa
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Cure</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>AFAIU, <a class="mention" href="/u/exadra37" rel="nofollow">@Exadra37</a> managed to handle it by a custom parser, but I can look at how to make it native to <code>md</code>. There is an open issue with handling normal HTML tags with attributes, which I wanted to address, so I might also allow <code>heex</code> tags and pass them as is down the stream, which in theory should make it possible to apply markdown and then heex engine natively.</p>
<p>I am to look into it during the next week. The bad news I am very bad at web stuff and I have very limited knowledge of phoenix/liveview/heex engine, but I think I could have it managed.</p>
<p>Stay tuned.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319876" 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/implementing-custom-markdown-parser-with-the-md-library/55025/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-319876" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319876"
                     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="319879" data-post-id="319879">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry, but I couldn’t find where are you using function components in your markdown files, or where are you custom parsing heex in blog.ex. <img src="https://forum.elixirforum.com/images/emoji/apple/expressionless.png?v=15" title=":expressionless:" class="emoji" alt=":expressionless:" loading="lazy" width="20" height="20"></p>
<p>Hmm, maybe this was just an example of a markdown blog in phoenix and I misunderstood? <img src="https://forum.elixirforum.com/images/emoji/apple/thinking.png?v=15" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"><br>
(If that’s the case, that’s what I currently have on my own blog! <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20">)</p>
<hr>
<p>My bad, I have now checked directly on your live blog and can see the approach you’re using.</p>
<p>It’s basically the same idea I had: using comments to split the html string, then dynamically insert components in between. Good one!</p>
<p>Looks like that’s easy for rendering entire LiveViews.<br>
Have you experimented with rendering live_components or function components?</p>
<p>I tried dynamically rendering the <code>&lt;.button&gt;</code> from core_components.ex and it didn’t look pretty haha.<br>
(Well, it doesn’t look that bad for components without inner_content.) <img src="https://forum.elixirforum.com/images/emoji/apple/v.png?v=15" title=":v:" class="emoji" alt=":v:" 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="319879" 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/implementing-custom-markdown-parser-with-the-md-library/55025/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-319879" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319879"
                     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="319896" data-post-id="319896">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="mudasobwa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mudasobwa/120/5298_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  mudasobwa
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Cure</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="LostKobrakai" data-post="13" data-topic="55025">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/48/3072_2.png" class="avatar"> LostKobrakai:</div>
<blockquote>
<p>I do something like that on my blog.</p>
</blockquote>
</aside>
<p>Well, splitting the input to conditionally feed one or another processor is not “something like that” <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> I was under the impression we are talking about interoperation, like <code>&lt;%= "**hello**" %&gt;</code> → <code>&lt;b&gt;hello&lt;/b&gt;</code>, aren’t we?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319896" data-batch-url="/posts/batch_likers">
                        1
                      </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/implementing-custom-markdown-parser-with-the-md-library/55025/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-319896" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319896"
                     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="319897" data-post-id="319897">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yeah, and something like:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;Lt4Web.CoreComponents.button class="bg-red-500"&gt;
  Hello
&lt;/Lt4Web.CoreComponents.button&gt;
</code></pre>
<p>To whatever HTML that component renders, e.g.:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;button class="bg-red-500"&gt;Hello&lt;/button&gt;
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319897" 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/implementing-custom-markdown-parser-with-the-md-library/55025/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-319897" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319897"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>