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 (variation for all headers is given later on in this section):
- 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 #
- Open the converted HTML file in VS Code.
- If hljs-* highlighting classes are present, remove them using regex find-replace:
- Find: <span class="hljs-[^"]+">([^<]+)<\/span>
- Replace: $1
- Above solution is not perfect. See Regex may not fix all cases sub-section in Stripping hljs-* Highlighting Classes from HTML section for more.
- If <table> elements are present, add table column spacing using plain find-replace:
- Find: <table>
- Replace: <table style="border-collapse: separate; border-spacing: 8px 0;">
- Use following regex find-replace to remove unwanted ids from Gem chat for all headers (in converted html)
- Find: <h([1-6])\s+id="[^"]*">
- Replace: <h$1>
- If required, 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
- So h1 and h2 are configured headers.
- Note that default for auto-header-ids-toc:Headers To Process is 1 2 but sometimes 3 is added to the list.
- If not done already, add my own sections (whose internal links will be created and added in TOC) as h2 headers without id attributes. Note that sometimes I add these sections as h2 headers in the markdown document itself. If so, at this stage, those h2 headers are there in the HTML without any id attribute (as id attributes are removed in an earlier step in this SOP).
- 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.
- Before creating a new post in Blogger, ensure that Dark Reader extension is turned Off as leaving it On may result in darkreader attributes and styles 'bleeding' into the post HTML content. Copy html content to Blogger post. Remove h1 header from top of post content, if present.
- When Dark Reader extension is Off, you can use Windows High Contrast (keyboard shortcut: Left Shift + Left Alt + PRINT SCREEN), to see Blogger post content in gray. But in Blogger Post Edit HTML view, text selection or even find highlight is not visible, at least with my Windows 11 settings.
- Check post in Blogger Compose. If OK, publish post and then check its rendering and TOC links.
Optimizing Table Layouts #
When converting Markdown tables to HTML for Blogger, sometimes the default column widths result in poor readability. Since Blogger lacks a visual "drag-and-drop" table resizer, the most efficient way to manage column widths is by using the <colgroup> and <col> elements.
The <colgroup> Approach
The <colgroup> element is placed immediately after the opening <table> tag. It acts as a "map" for the columns, allowing you to define styles for entire columns in one central location.
Example Implementation:
<table>
<colgroup>
<col> <col style="width:80%"> <col> </colgroup>
<tr>
<td>Data 1</td>
<td>This is the main content area that needs more space.</td>
<td>Data 2</td>
</tr>
</table>
Why This Method Works Best for Bloggers
- Structural Efficiency: Instead of adding
style="width: 70%;"to every cell in a column, you define it once at the top. This significantly reduces the size of the HTML document. - Maintenance: If the layout needs adjustment, you only need to change a single value in the
<colgroup>section rather than hunting through rows of table data. - Predictable Scaling: By setting a primary column to a high percentage (e.g., 80%), the browser automatically compresses the remaining columns to fit the content, ensuring the table stays within the blog's container width.
- Clean Markdown Conversion: This approach is easy to inject into the raw HTML output of a Markdown-to-HTML converter without breaking the underlying table data structure.
--------------------------Tip: If the table still feels cramped, ensure the
<table>tag itself is set towidth: 100%;in your CSS or inline styles to ensure it utilizes the full width of the blog post area.
Increasing Table Column Spacing via border-spacing #
When converting Markdown to HTML for Blogger, tables often appear with text touching the cell edges. If you want a localized fix that doesn't require editing your blog's CSS theme or adding <style> blocks, use the border-spacing property on the <table> tag.
Add the following style attribute to your opening table tag:
<table style="border-collapse: separate; border-spacing: 8px 0;">
</table>
Why this works:
- The 8px Value: This creates a 8-pixel horizontal "gutter" between your columns, providing immediate readability.
- The 0 Value: Setting the second value to
0ensures you don't add unwanted vertical gaps between your rows. - Overriding Themes: By including
border-collapse: separate;, you ensure the spacing works even if your Blogger theme (like Contempo) tries to force the borders to collapse.
Benefits at a Glance:
- Zero Side Effects: The change is strictly localized to the specific table. It will not affect other tables in the same post or elsewhere on your blog.
- Low Code Overhead: You only need to modify one tag (
<table>) rather than adding classes or IDs.
"One-Liner" for Table Grid Borders - Not Straightforward #
When converting Markdown to HTML for Blogger, you might find it easy to set a column width or a table background in a single tag, but setting a uniform grid border (for all rows and columns) requires more effort.
The Separation of Concerns
Modern web standards (HTML5 and CSS3) operate on the principle of Separation of Concerns.
- HTML is responsible for the structure (defining that a table exists).
- CSS is responsible for the presentation (defining what the borders look like).
Because a table is a "parent" element and cells (<td>, <th>) are "children," CSS rules do not allow a border property on the parent to automatically apply itself to every individual child. In the eyes of the browser, the table is just a container; it doesn't "know" you want every internal box to match the outer box unless you explicitly select those internal boxes.
Why the "Old Way" is Discouraged
In the past, you could use the border="1" attribute directly on the <table> tag. While this still works in most browsers, it is deprecated.
- It produces a "beveled" 3D look that is difficult to style.
- It mixes presentation with structure, which can cause layout issues across different devices or themes.
Showing Table Row and Column Borders without Blogger Theme Customization
To achieve a clean, modern grid border without modifying your entire blog's template, you generally have two choices, neither of which is a "one-liner":
- Inline Styles: Adding
style="border: 1px solid black;"to every single<td>and<th>tag. - Scoped Style Blocks: Adding a
<style>block at the top of your post is a common workaround, but it technically violates standard HTML practices. According to official specifications,<style>blocks should reside within the<head>of a document. In Blogger, you only have access to the<body>of an individual post, meaning any style block you add is "injected" mid-page. While modern browsers are forgiving and will still render the styles, it can lead to "Flash of Unstyled Content" (FOUC) or minor validation errors.
Showing Table Row and Column Borders using Blogger Theme Customization
You can add a specific CSS class to your Blogger theme once. After that, you only need a single word in your HTML to trigger a full grid.
How to do it:
- In Blogger, go to Theme > Customize > Advanced > Add CSS (or edit the HTML and find the
<b:skin>section). - Add a class like this:
.post-grid { border-collapse: collapse !important; width: 100%; } .post-grid th, .post-grid td { border: 2px solid black !important; padding: 8px; } - In any future blog post, your table "one-liner" becomes:
<table class="post-grid">.
Advantages:
- Simplicity: Once set up, it is a true one-liner for every new table you create.
- Consistency: Every table across your blog will have an identical professional look.
- Standards Compliant: The CSS lives in the
<head>(via the template), and the HTML lives in the<body>, which is exactly how web standards are designed to work.
Disadvantages:
- Global Overhead: The CSS code is loaded for every single page of your blog, even for posts that don't contain any tables.
- The "Lightweight" Reality: In reality, a few lines of CSS code represent a negligible amount of data (less than 1KB). The impact on page load speed is virtually zero compared to the size of images or scripts.
- Template Dependency: If you ever change your Blogger theme, you must remember to "migrate" this custom CSS to the new template, or your table borders will disappear.
Summary Checklist for Table Formatting
When deciding how to handle table borders in your Markdown-to-Blogger workflow, consider this hierarchy:
| Method | Effort Level | Best For... |
|---|---|---|
| No Border | Zero | Maximum simplicity and lean HTML. |
| Inline Styles | High | One-off tables with unique needs. |
| Global Class | Medium (Once) | Frequent table users who want a permanent "one-liner." |
Search and Replace in Blogger Edit HTML window #
Edited Google Search AI response
Blogger’s Edit HTML mode does offer a search and replace feature, though it is not immediately visible as a button. It is activated through specific keyboard shortcuts once you have clicked inside the editor area.
Keyboard Shortcuts
- Find and Replace (Single/Sequential): Press Ctrl + Shift + F (Windows/Linux) or Cmd + Shift + F (Mac).
-
A single search box
[Ravi: with prompt of 'Replace' but it is asking for find string]
will appear at the top of the editor.
- Type the word you want to find and press Enter.
- The box will then prompt you [Ravi: with prompt of 'With'] for the replacement text; type it and press Enter again.
- Ravi: It then shows prompt: 'Replace?' with a few button options - Yes, No, Stop, All. On pressing Yes, it changes text at current match and automatically moves to next match providing a convenient way to user controlled replace for all matches, one at a time. This worked well for me.
- Replace All: Press Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac) to replace all occurrences of a string at once. [Ravi: I have not tried this.]
Important Tips
- Focus the Editor: You must click inside the code editor first; otherwise, these shortcuts may trigger browser-level functions (like opening your browser history).
- Theme Editor vs. Post Editor: These shortcuts are primarily designed for the Theme > Edit HTML section. In the post editor's HTML view, support for these shortcuts can be inconsistent across different browser versions.
- External Alternative: For complex edits or large-scale replacements, many users prefer to copy the entire HTML code into a dedicated text editor like Notepad++ or Sublime Text, perform the search/replace there, and then paste it back into Blogger.
Stripping hljs-* Highlighting Classes from HTML #
If you use a Markdown-to-HTML converter (like https://markdowntohtml.com/) that automatically adds <span> tags with hljs-* classes (like hljs-keyword, hljs-string, or hljs-function), you can quickly strip them out and keep only the raw text using Regular Expressions in VS Code.
The Problem
Markdown converters often produce "polluted" HTML code snippets like this:
<span class="hljs-keyword">try</span> {
<span class="hljs-string">"Hello World"</span>
}
The Solution: Global Regex Find and Replace
Use the following pattern to target any hljs class variation and remove the tags while preserving the code inside.
1. Open the Replace Widget:
Press Ctrl + H (Windows/Linux) or Cmd + Option + F (Mac).
2. Enable Regex Mode:
Click the .* icon in the Find box (or press Alt + R).
3. Enter the Pattern:
- Find:
<span class="hljs-[^"]+">([^<]+)<\/span> - Replace:
$1
How It Works:
<span class="hljs-[^"]+">: Matches the opening tag for any class starting withhljs-until it hits the closing quote.([^<]+): This is a capture group. It "grabs" all the text content inside the span until it sees the next<symbol.<\/span>: Matches the closing tag (the/is escaped).$1: This is a backreference. It tells VS Code to delete the entire tag match and replace it with only the content found in the first capture group.
Pro-Tip for Nested Tags
Some converters nest spans (e.g., a hljs-params span inside a hljs-function span). If tags remain after the first "Replace All," simply run the command a second time to strip the outer layers.
Regex may not fix all cases
Note: The find/replace regex above has limitations with certain complex or multi-line nested highlight tags (e.g., those caused by Dark Reader styles). Multiple 'Replace All' passes may not resolve these. A quick manual visual check for leftover hljs- classes in the HTML is recommended. If there are only few that are left they can be left in the document as it won't contribute much to post bloat. If there are many such classes, they may have to be manually fixed.
Comments
Post a Comment