# Issue

After migrating from Blogger to Jekyll+Zeit, I encountered a problem where code blocks embedded in details like the one below were not highlighted because Jekyll does not support rendering Markdown in HTML.

<details>
    <summary>BlahBlah</summary>
    ```lang
    ...
    ```
</details>

Not to mention the code blocks imported from Blogger were using Highlight.js syntax, which directly ignored by Rouge:

<pre><code class="lang">
    ...
</code></pre>

Therefore, post-migration to Jekyll, to insert code within <details>, I continued using Highlight.js as the code highlighting engine.

However, after switching themes to plainwhite, being a perfectionist, I wanted to stick with Rouge, bidding farewell to Highlight.js and moving forward. This involved replacing the code blocks mentioned above with Rouge-supported syntax.

# Solution

While exploring Rouge documentation online, I discovered that Rouge not only supports Markdown code blocks but also liquid syntax:

{% highlight lang %}
...
{% endhighlight %}

Therefore, by replacing the mentioned <pre> with ``{% highlight lang %}`, it should work. But I didn’t want to do it manually. With an experimental mindset, I searched for a batch replace plugin in Eric’s beloved VSCode. Surprisingly, I found one: Batch Replacer. This plugin supports batch replacement of all file contents in the Workspace with RegExp syntax.

Batch Replacer Extension

Armed with my newfound RegExp knowledge, eager to try it out, I crafted the following replacement code snippet:

replace-regex "<pre>\s*<code class="([^"]*)">"
with "{% highlight $1 %}"

replace-regex "</code>\s*</pre>"
with "{% endhighlight %}"

Add the _post folder to the Workspace, press Ctrl+Shift+P, type Batch Refit, hit Enter, and voilà!

Now all code blocks using Highlight.js syntax have been replaced with Rouge code blocks. Even when wrapped within HTML code, they can be easily identified and rendered. Pretty smart, right? Hahaha!