Add code language table to show IDs along with language names

code.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Code"
 description: "Display inline code and code blocks"
-icon: 'code'
+icon: "code"
 ---
 
 ## Basic
@@ -14,8 +14,6 @@ To denote a `word` or `phrase` as code, enclose it in backticks (\`).
 To denote a `word` or `phrase` as code, enclose it in backticks (`).
 ```
 
-
-
 ### Code Block
 
 Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language.
@@ -60,29 +58,104 @@ class HelloWorld {
 ```
 ````
 
-We use [Shiki](https://shiki.style/guide) for syntax highlighting and support these languages:
-
-* Bash
-* Blade
-* C
-* C++
-* C#
-* Dart
-* Go
-* Java
-* JavaScript
-* JSON
-* JSX
-* Kotlin
-* Log
-* Markdown
-* PHP
-* Python
-* Ruby
-* Swift
-* TypeScript
-* TSX
-* YAML
+### Languages
+
+We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax:
+
+<table className="border-collapse">
+ <thead>
+   <tr>
+     <th className="pr-12 py-2 text-left font-medium">Language</th>
+     <th className="pr-12 py-2 text-left font-medium">ID</th>
+   </tr>
+ </thead>
+ <tbody>
+   <tr>
+     <td className="pr-12 py-2">Bash</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">bash</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Laravel Blade</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">blade</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">C</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">c</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">C++</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">c++</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">C#</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">c#</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Dart</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">dart</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">Go</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">go</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Java</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">java</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">JavaScript</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">javascript</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">JSON</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">json</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">JSX</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">jsx</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Kotlin</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">kotlin</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">Log</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">log</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Markdown</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">markdown</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">PHP</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">php</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Python</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">python</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">Ruby</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">ruby</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">Swift</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">swift</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">TypeScript</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">typescript</code></td>
+   </tr>
+   <tr className="">
+     <td className="pr-12 py-2">TSX</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">tsx</code></td>
+   </tr>
+   <tr>
+     <td className="pr-12 py-2">YAML</td>
+     <td className="pr-12 py-2"><code className="px-1 rounded text-sm">yaml</code></td>
+   </tr>
+ </tbody>
+</table>
 
 ## Names