Skip to content

Commit 8d1d8ac

Browse files
ricardonunez-ioricardonunez-io
authored
Add code language table to show IDs along with language names (#779)
* Add code language table to show IDs along with language names * Style it wider
1 parent 0bbed20 commit 8d1d8ac

File tree

1 file changed

+99
-26
lines changed

1 file changed

+99
-26
lines changed

‎code.mdx‎

Lines changed: 99 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Code"
33
description: "Display inline code and code blocks"
4-
icon: 'code'
4+
icon: "code"
55
---
66

77
## Basic
@@ -14,8 +14,6 @@ To denote a `word` or `phrase` as code, enclose it in backticks (\`).
1414
To denote a `word` or `phrase` as code, enclose it in backticks (`).
1515
```
1616

17-
18-
1917
### Code Block
2018

2119
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 {
6058
```
6159
````
6260

63-
We use [Shiki](https://shiki.style/guide) for syntax highlighting and support these languages:
64-
65-
* Bash
66-
* Blade
67-
* C
68-
* C++
69-
* C#
70-
* Dart
71-
* Go
72-
* Java
73-
* JavaScript
74-
* JSON
75-
* JSX
76-
* Kotlin
77-
* Log
78-
* Markdown
79-
* PHP
80-
* Python
81-
* Ruby
82-
* Swift
83-
* TypeScript
84-
* TSX
85-
* YAML
61+
### Languages
62+
63+
We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax:
64+
65+
<table className="border-collapse">
66+
<thead>
67+
<tr>
68+
<th className="pr-12 py-2 text-left font-medium">Language</th>
69+
<th className="pr-12 py-2 text-left font-medium">ID</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
<tr>
74+
<td className="pr-12 py-2">Bash</td>
75+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">bash</code></td>
76+
</tr>
77+
<tr className="">
78+
<td className="pr-12 py-2">Laravel Blade</td>
79+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">blade</code></td>
80+
</tr>
81+
<tr>
82+
<td className="pr-12 py-2">C</td>
83+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">c</code></td>
84+
</tr>
85+
<tr className="">
86+
<td className="pr-12 py-2">C++</td>
87+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">c++</code></td>
88+
</tr>
89+
<tr>
90+
<td className="pr-12 py-2">C#</td>
91+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">c#</code></td>
92+
</tr>
93+
<tr className="">
94+
<td className="pr-12 py-2">Dart</td>
95+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">dart</code></td>
96+
</tr>
97+
<tr>
98+
<td className="pr-12 py-2">Go</td>
99+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">go</code></td>
100+
</tr>
101+
<tr className="">
102+
<td className="pr-12 py-2">Java</td>
103+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">java</code></td>
104+
</tr>
105+
<tr>
106+
<td className="pr-12 py-2">JavaScript</td>
107+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">javascript</code></td>
108+
</tr>
109+
<tr className="">
110+
<td className="pr-12 py-2">JSON</td>
111+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">json</code></td>
112+
</tr>
113+
<tr>
114+
<td className="pr-12 py-2">JSX</td>
115+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">jsx</code></td>
116+
</tr>
117+
<tr className="">
118+
<td className="pr-12 py-2">Kotlin</td>
119+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">kotlin</code></td>
120+
</tr>
121+
<tr>
122+
<td className="pr-12 py-2">Log</td>
123+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">log</code></td>
124+
</tr>
125+
<tr className="">
126+
<td className="pr-12 py-2">Markdown</td>
127+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">markdown</code></td>
128+
</tr>
129+
<tr>
130+
<td className="pr-12 py-2">PHP</td>
131+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">php</code></td>
132+
</tr>
133+
<tr className="">
134+
<td className="pr-12 py-2">Python</td>
135+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">python</code></td>
136+
</tr>
137+
<tr>
138+
<td className="pr-12 py-2">Ruby</td>
139+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">ruby</code></td>
140+
</tr>
141+
<tr className="">
142+
<td className="pr-12 py-2">Swift</td>
143+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">swift</code></td>
144+
</tr>
145+
<tr>
146+
<td className="pr-12 py-2">TypeScript</td>
147+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">typescript</code></td>
148+
</tr>
149+
<tr className="">
150+
<td className="pr-12 py-2">TSX</td>
151+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">tsx</code></td>
152+
</tr>
153+
<tr>
154+
<td className="pr-12 py-2">YAML</td>
155+
<td className="pr-12 py-2"><code className="px-1 rounded text-sm">yaml</code></td>
156+
</tr>
157+
</tbody>
158+
</table>
86159

87160
## Names
88161

0 commit comments

Comments
 (0)