Convert HTML Code Elements to Markdown Code Syntax

HTML Code Elements to Markdown

HTML uses <code> for inline code and <pre><code> for code blocks. Markdown uses backticks for inline code and triple backticks (or indentation) for code blocks.

Inline Code

<p>Use the <code>Array.map()</code> method to transform elements.</p>

Converts to:

Use the `Array.map()` method to transform elements.

The <code> tag is replaced with single backtick wrappers.

Code Blocks

<pre><code>function hello() {
  console.log("Hello, world!");
}
</code></pre>

Converts to:

```
function hello() {
  console.log("Hello, world!");
}
```

The <pre><code> combination is recognized as a code block and wrapped in triple backticks.

Language Detection

Many HTML code blocks include a language class for syntax highlighting:

<pre><code class="language-javascript">const x = 42;
</code></pre>

A good converter extracts the language hint:

```javascript
const x = 42;
```

Common class patterns include language-*, lang-*, and highlight-*.

HTML Entity Decoding

Code inside HTML often contains encoded entities:

<pre><code>&lt;div class=&quot;container&quot;&gt;
  &amp;copy; 2024
&lt;/div&gt;
</code></pre>

During conversion, entities must be decoded back to their literal characters:

```
<div class="container">
  &copy; 2024
</div>
```

< becomes <, > becomes >, & becomes &, and " becomes ".

Standalone pre Tags

A bare <pre> without <code> should also be converted to a code block, as it indicates preformatted text.