1. Prepare your Markdown content

prepare your Markdown content as a test.md file, with Typora editor, which is good at making HTML table.

Bash Python C++ PL/SQL JavaScript
#!/bin/bash
printf "%s\n" "Hello World"
# -- coding: UTF-8 --

print('Hello World')
#include

int main(){ //this is main
std::cout << "Hello World" << std::endl;
return 0;
}
set serveroutput on
exec dbms_output.put_line('Hello World');
console.log('Hello World');

2. Download markdown-to-html Tool

npm init
npm install -g markdown-to-html

3. Prepare some header and footer

vi test.header
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="vs2015.css">
    <title>Document</title>
</head>
<style>
    .op_board {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    ul>li {
        list-style-type: none;
    }
</style>

<body>
    <ul class="op_board">
        <li><label for="col1">Bash </label><input type="checkbox" name="col1" id="col1" checked></li>
        <li><label for="col2">Python </label><input type="checkbox" name="col2" id="col2" checked></li>
        <li><label for="col3">C++ </label><input type="checkbox" name="col3" id="col3" checked></li>
        <li><label for="col4">PL/SQL </label><input type="checkbox" name="col4" id="col4" checked></li>
        <li><label for="col5">JavaScript</label><input type="checkbox" name="col5" id="col5" checked></li>
    </ul>
    
vi test.footer
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        $('#col1').change(function () { $('#mytable tr > *:nth-child(2)').toggle(); })
        $('#col2').change(function () { $('#mytable tr > *:nth-child(3)').toggle(); })
        $('#col3').change(function () { $('#mytable tr > *:nth-child(4)').toggle(); })
        $('#col4').change(function () { $('#mytable tr > *:nth-child(5)').toggle(); })
        $('#col5').change(function () { $('#mytable tr > *:nth-child(6)').toggle(); })
    </script>
    <script src="highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</body>

</html>

4. Translate and merge into a complete HTML file

# replace some meta chars(<, >, ", ') with html code
vi f1.sed
s/&lt;/</g
s/&gt;/>/g
s/&quot;/"/g
s/&#39;/\'/g
s/<iostream>/\&lt;iostream\&gt;/

# add <pre><code> in <td>
vi f2.sed 
:a;N;$!ba;s/<tr>\n/<tr>/g
s/<td>/<td><pre><code>/g
s/<\/td>/<\/code><\/pre><\/td>/g

# remove the <pre><code> for 1st column
vi f3.sed
s/<tr>.*<\/pre>/& /
s/<tr><td><pre><code>/<tr><td>/
s/<\/code><\/pre> //
s/<table>/<table id="mytable">/
s/<code><\/code>/<code>TBD<\/code>/

# replace <br /> or <br/> with "\n"
vi f1.awk
BEGIN {IGNORECASE=1; RS="<br />"}
{ print $0 }

vi f2.awk
BEGIN {IGNORECASE=1; RS="<br/>"}
{ print $0 }

# simplify command line
vi gen_html.sh
#!/bin/bash
markdown $1 | sed -f f1.sed | sed -f f2.sed | sed -f f3.sed | awk -f f1.awk | awk -f f2.awk > test.table
cat test.header test.table test.footer > test.html

chmod +x ./gen_html.sh
./gen_html.sh test.md

ll test.html