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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Off the top of my head, is this behavior happening because when the html is being parsed/interpolated by thePhoenix heex engine, it is treating <code>&lt;!— —&gt;</code> like an html tag?  Is that how html interprets the comment in general?</p>
<p>Then the interpolation would throw an error as it seems to be doing.</p>
<p>In which case, do we just need to add something to identify the comment tag syntax? Or is it something else or much more complex? <img src="https://forum.elixirforum.com/images/emoji/apple/blush.png?v=15" title=":blush:" class="emoji" alt=":blush:" 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="228471" 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/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-228471" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228471"
                     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="228474" data-post-id="228474">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The parser identifies <code>&lt;!--</code> as a comment in <a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.16.4/lib/phoenix_live_view/html_tokenizer.ex#L56" rel="noopener nofollow ugc">handle_text</a>, and passes it off to <a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.16.4/lib/phoenix_live_view/html_tokenizer.ex#L100" rel="noopener nofollow ugc">handle_comment</a>, which needs to find a closing <code>--&gt;</code> or it will raise.  The problem is that it seems to “give up” on the search as soon as it hits a <code>&lt;%</code></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228474" 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/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-228474" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228474"
                     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="228483" data-post-id="228483">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tadasajon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tadasajon/120/23216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tadasajon
                    <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>Here is the solution I came up with:</p>
<ol>
<li>create a new file in the <code>lib/myapp_web</code> directory and define a new module in it:</li>
</ol>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule HeexIgnore do
    use Phoenix.Component

    def ignore(assigns), do: ~H""
end
</code></pre>
<ol start="2">
<li>In <code>lib/myapp_web.ex</code> find the private function <code>defp view_helpers do...</code> which contains several import statements.  Add this line as one of the imports in that function:</li>
</ol>
<pre data-code-wrap="elixir"><code class="lang-elixir">import HeexIgnore
</code></pre>
<ol start="3">
<li>Now all your templates should be able to add the <code>&lt;.ignore&gt; ... &lt;/.ignore&gt;</code> incantation in order to completely ignore large chunks of lines.</li>
</ol>
<p>Thanks to <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> for giving me some tips in the GitHub issue referenced by <a class="mention" href="/u/kokolegorille" rel="nofollow">@kokolegorille</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="228483" data-batch-url="/posts/batch_likers">
                        16
                      </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/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-228483" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228483"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-solved cat-solved" title="Marked as solution"></div>
  </section>
</div>
    <div class="postbit" id="228484" data-post-id="228484">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I started reading the <a href="https://forum.elixirforum.com/t/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/4" rel="nofollow">issue</a> around this that everyone’s been having a conversation on, and not sure I have much else to add. Seems very intentional that they have currently chose this implementation around the comments and sounds like there are some workarounds if you need a different behavior until they can revisit this again and discuss more scenarios. <img src="https://forum.elixirforum.com/images/emoji/apple/blush.png?v=15" title=":blush:" class="emoji" alt=":blush:" loading="lazy" width="20" height="20"></p>
<p>Thanks for the links! <img src="https://forum.elixirforum.com/images/emoji/apple/heart.png?v=15" title=":heart:" class="emoji" alt=":heart:" loading="lazy" width="20" height="20"></p>
<p>Edit: Yes, looks like <a class="mention" href="/u/tadasajon" rel="nofollow">@tadasajon</a> went with one of those workarounds.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228484" 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/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-228484" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228484"
                     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="273660" data-post-id="273660">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>for the record:<br>
this is solved with <code>&lt;%!--</code> <code>--%&gt;</code> since elixir v1.14.0 09/2022:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;%!--  comment
  over
  multiple lines --%&gt;
</code></pre>
<p><a href="https://github.com/elixir-lang/elixir/pull/11505" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/elixir-lang/elixir/pull/11505</a></p>
<p><strong>getting it to work in vscode:</strong></p>
<p>vscode-elixir-ls supports it since 0.12.0:<br>
<a href="https://github.com/elixir-lsp/vscode-elixir-ls/commit/9afc4d21eb7ed870f296e3d2fd34ef95cd4d16ea" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/elixir-lsp/vscode-elixir-ls/commit/9afc4d21eb7ed870f296e3d2fd34ef95cd4d16ea</a></p>
<p>i just had to add this to my settings.json to use it in vscode with the default comment-shortcut:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  "custom-language-properties": {
    "phoenix-heex.comments.blockComment": ["&lt;%!--", "--%&gt;"]
  },
</code></pre>
<p>(<code>phoenix-heex.</code> might be named <code>html-eex.</code> or similar in your setup)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="273660" data-batch-url="/posts/batch_likers">
                        21
                      </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/how-can-i-easily-comment-out-lines-in-a-html-heex-file/43016/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-273660" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="273660"
                     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>