[dev.to] Titles in comments end up in the TOC

[bcouetil]

Thank you again for this great tool, I'm using on every dev.to articles 🥰

Today I came accross a bug : titles in comments end up in the TOC

By comments I mean <!-- -->

[derlin]

Thank you for the kind words! Happy to hear you use it. Can you provide a minimal reproducible example? So I can better understand the problem.

[derlin]

Actually, I believe HTML comments are not supported by the devto parser, you need to use liquid tags to add comments. Could you try the comment elsewhere in the article and see if it is rendered as well?

Finally, can you confirm you use the devto profile? Html comments are only used in other profiles (there is a special option for comment style I had to add only for devto 😅)

[bcouetil]

Sure, happy to help. No mistake, this is dev.to that I choose for generation.

Here is the code, including the generation :

---
title: "Comments Test"
license: public-domain
published: false
---

{%- # TOC start (generated with https://github.com/derlin/bitdowntoc) -%}

- [Introduction](#introduction)
- [Hello world](#hello-world)
- [Ohayou sekai](#ohayou-sekai)
- [Conclusion](#conclusion)

{%- # TOC end -%}

# Introduction

Lorem ipsum.

<!--

# Hello world

# Ohayou sekai

-->

# Conclusion

Dolor sit amet.

And here is the preview.

Visual Studio Code generates HTML comments when I ask it to comment out something.

And I did not find anywhere what is the proper way of commenting on dev.to.

I carefully read the documentation about liquid tags and did not find anything about commenting out code. The devcomment is for embedding actual comments 🧐

[derlin]

Well, just look at the comments I use in the TOC then 😉. TOC start and TOC end don't render do they?

{%- # this is a liquid comment -%}

[bcouetil]

You are right, they are so in front of my eyes that I forget their existence 😅

I'll use that from now on.

Where did you find that it is better than HTML comments ?

[derlin]

Assuming by better you mean how did I find out how to comment on dev.to, I googled "liquid tag comments" and stumbled very quickly upon the {% #... %} syntax, e.g. here https://shopify.dev/docs/api/liquid/tags.

The problem though is that it leaves newlines. I looked up "whitespace control liquid" and got the rule:

If you don’t want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags ({%- and -%})

Combining the two made it work as expected.

[bcouetil]

Technically, HTML comments are handled by DEV and not by bitdowntoc, so there is an issue...

But fair enough, the workaround is satisfying, even if that means manually changing what VS Code suggests me when commenting !