Markdown (incl. Gemini Chat Responses) to Blogger Blog Post HTML - Procedures and Tips
Jump Links
VS Code NBSP Find and Replace #
Here is a concise draft you can use for your blog.
Fixing "Invisible" NBSP Character Issues in VS Code
When copying code or text from web-based chat applications into VS Code, you may occasionally bring over a Non-Breaking Space (NBSP) ($U+00A0$) instead of a standard space ($U+0020$). These characters look identical but can break searches, scripts, and compilers.
The Problem
Even with Render Whitespace enabled, VS Code may display an NBSP as a regular space without any warning. This often happens because modern VS Code versions categorize the NBSP as "Non-Basic ASCII," and the safety highlighter is disabled by default for "Trusted Workspaces."
The Fix
To ensure VS Code always highlights these "imposter" spaces with a visible border and a hover-tooltip:
- Open Settings (
Ctrl + ,). - Search for
Editor > Unicode Highlight: Non Basic ASCII. - Change the setting from
inUntrustedWorkspacetotrue. - (Optional) Ensure
Editor > Unicode Highlight: Ambiguous Charactersis also checked.
Once enabled, any NBSP character will be surrounded by a thin border, allowing you to quickly identify and replace it before it causes "ghost" bugs in your code.
Removing id attribute from header tags using regex in VS Code #
Gem: In VS Code, you can use a regular expression to target these specific h3 tags. By using the "Find and Replace" tool (Ctrl + H or Cmd + Alt + F on Mac), you can strip the id attributes instantly.
The Find and Replace Pattern
To match the id attribute and its contents while keeping the opening <h3> tag intact, use the following:
- Find:
<h3\s+id="[^"]*"> - Replace:
<h3>
How the Regex Works
| Symbol | Purpose |
|---|---|
<h3 | Matches the literal opening of the tag. |
\s+ | Matches one or more whitespace characters (the space after "h3"). |
id=" | Matches the start of the ID attribute. |
[^"]* | A negated character set that matches everything until it hits the closing quote. |
"> | Matches the closing quote and the end of the tag. |
Steps in VS Code
- Open the Replace widget (Ctrl + H).
- Click the Use Regular Expression icon (the
.*button) or press Alt + R. - Enter the Find and Replace values as shown above.
- Click Replace All (the icon with two overlapping squares).
Pro Tip: If your IDs contain unusual characters like escaped quotes (uncommon in standard HTML but possible), the
[^"]*logic is the safest way to ensure the regex doesn't "over-eat" and accidentally delete parts of the following tags.
- Optionally, in VS Code, class="no-toc" can be applied to all configured header elements using my VS Code extension command:
- Auto Header IDs and TOC: Mark Configured Headers as no-toc
- h2 and h3 headers added manually after the above step (without no-toc class) can have ids assigned to them by the extension command:
- Auto Header IDs and TOC: Add IDs to Headers
- Table of Contents can be generated with extension command:
- Auto Header IDs and TOC: Create Table of Contents
Changing h3 tags to h2 excluding h3 tags followed by specific class using regex in VS Code #
Gem: Yes, you can do this by using a negative lookahead. This allows you to tell VS Code: "Find an <h3> tag, but only if it is not followed by a specific class."
The Find and Replace Pattern
Open the Replace widget (Ctrl + H) and ensure the Regex mode (.* icon) is active.
- Find:
<h3(?!\s+class="no-toc")>(.*?)</h3> - Replace:
<h2>$1</h2>
Breakdown of the Logic
| Part | Meaning |
|---|---|
<h3 | Matches the literal start of the tag. |
(?!\s+class="no-toc") | Negative Lookahead: Ensures the very next characters are NOT a space followed by class="no-toc". If that class is present, the match fails. |
> | Matches the closing bracket of the opening tag. |
(.*?) | Capture Group: Matches the text inside the header. The ? makes it "lazy" so it stops at the first </h3> it finds. |
</h3> | Matches the literal closing tag. |
$1 | In the replace field, this puts back whatever text was captured inside the original brackets. |
Important Considerations
- Class Order: If your "no-toc" headers sometimes have other attributes (e.g.,
<h3 id="top" class="no-toc">), the regex above will still match and change them because it's looking forclass="no-toc"immediately after theh3. - Global Classes: If you have multiple different classes you want to exclude, you can adjust the lookahead, but for your specific request regarding the
no-tocpattern, the logic above is the most direct solution.
SOP for Gemini chat markdown conversion to html for Blogger post #
- In VS Code, use following to remove unwanted ids from Gem chat for h2, h3 and h4 (in converted html)
- Find: <h3\s+id="[^"]*">
- Replace: <h3>
- Run "Auto Header IDs and TOC: Mark Configured Headers as no-toc" command
- Note Settings -> auto-header-ids-toc:Headers To Process typically is set to: 1 2 3
- So h1, h2 and h3 are configured headers.
- Note that default for auto-header-ids-toc:Headers To Process is 1 2
- Add my own sections (whose internal links will be created and added in TOC) as h2 headers without id attributes.
- Run "Auto Header IDs and TOC: Add IDs to Headers" command
- Position cursor where TOC has to be inserted. Next run "Auto Header IDs and TOC: Create Table of Contents" command
- In TOC remove top unwanted <ul>. Added <hr> at end of TOC.
- Check html rendering in browser.
- Copy html content to Blogger post. Remove h1 header from top of post content, if present.
- Check post in Blogger Compose. If OK, publish post and then check its rendering and TOC links.
Comments
Post a Comment