Skip to content

Commit 5bcc503

Browse files
sharevbsharevb
committed
feat(new tool): Markdown Cheatsheet
Markdown Cheatsheet Fix CorentinTh#424 and part of CorentinTh#538
1 parent d3b32cc commit 5bcc503

File tree

4 files changed

+243
-8
lines changed

4 files changed

+243
-8
lines changed

‎src/tools/index.ts

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { tool as base64FileConverter } from './base64-file-converter';
22
import { tool as base64StringConverter } from './base64-string-converter';
33
import { tool as basicAuthGenerator } from './basic-auth-generator';
4-
54
import { tool as asciiTextDrawer } from './ascii-text-drawer';
6-
75
import { tool as textToUnicode } from './text-to-unicode';
86
import { tool as safelinkDecoder } from './safelink-decoder';
7+
import { tool as markdownCheatsheet } from './markdown-cheatsheet';
98
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
109
import { tool as numeronymGenerator } from './numeronym-generator';
1110
import { tool as macAddressGenerator } from './mac-address-generator';
@@ -85,7 +84,19 @@ import { tool as yamlViewer } from './yaml-viewer';
8584
export const toolsByCategory: ToolCategory[] = [
8685
{
8786
name: 'Crypto',
88-
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
87+
components: [
88+
tokenGenerator,
89+
hashText,
90+
bcrypt,
91+
uuidGenerator,
92+
ulidGenerator,
93+
cypher,
94+
bip39,
95+
hmacGenerator,
96+
rsaKeyPairGenerator,
97+
passwordStrengthAnalyser,
98+
pdfSignatureChecker,
99+
],
89100
},
90101
{
91102
name: 'Converter',
@@ -128,16 +139,23 @@ export const toolsByCategory: ToolCategory[] = [
128139
httpStatusCodes,
129140
jsonDiff,
130141
safelinkDecoder,
142+
asciiTextDrawer,
131143
],
132144
},
133145
{
134146
name: 'Images and videos',
135-
components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
147+
components: [
148+
qrCodeGenerator,
149+
wifiQrCodeGenerator,
150+
svgPlaceholderGenerator,
151+
cameraRecorder,
152+
],
136153
},
137154
{
138155
name: 'Development',
139156
components: [
140157
gitMemo,
158+
markdownCheatsheet,
141159
randomPortGenerator,
142160
crontabGenerator,
143161
jsonViewer,
@@ -152,15 +170,29 @@ export const toolsByCategory: ToolCategory[] = [
152170
},
153171
{
154172
name: 'Network',
155-
components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
173+
components: [
174+
ipv4SubnetCalculator,
175+
ipv4AddressConverter,
176+
ipv4RangeExpander,
177+
macAddressLookup,
178+
macAddressGenerator,
179+
ipv6UlaGenerator,
180+
],
156181
},
157182
{
158183
name: 'Math',
159-
components: [mathEvaluator, etaCalculator, percentageCalculator],
184+
components: [
185+
mathEvaluator,
186+
etaCalculator,
187+
percentageCalculator],
160188
},
161189
{
162190
name: 'Measurement',
163-
components: [chronometer, temperatureConverter, benchmarkBuilder],
191+
components: [
192+
chronometer,
193+
temperatureConverter,
194+
benchmarkBuilder,
195+
],
164196
},
165197
{
166198
name: 'Text',
@@ -176,7 +208,10 @@ export const toolsByCategory: ToolCategory[] = [
176208
},
177209
{
178210
name: 'Data',
179-
components: [phoneParserAndFormatter, ibanValidatorAndParser],
211+
components: [
212+
phoneParserAndFormatter,
213+
ibanValidatorAndParser,
214+
],
180215
},
181216
];
182217

‎src/tools/markdown-cheatsheet/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Markdown } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'Markdown Cheat Sheet',
6+
path: '/markdown-cheatsheet',
7+
description: 'Markdown Cheat Sheet',
8+
keywords: ['markdown', 'cheatsheet', 'memo'],
9+
component: () => import('./markdown-cheatsheet.vue'),
10+
icon: Markdown,
11+
createdAt: new Date('2024-03-09'),
12+
});

‎src/tools/markdown-cheatsheet/markdown-cheatsheet.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { useThemeVars } from 'naive-ui';
3+
import Memo from './md-memo.content.md';
4+
5+
const themeVars = useThemeVars();
6+
</script>
7+
8+
<template>
9+
<div>
10+
<Memo />
11+
</div>
12+
</template>
13+
14+
<style lang="less" scoped>
15+
::v-deep(pre) {
16+
margin: 0;
17+
padding: 15px 22px;
18+
background-color: v-bind('themeVars.cardColor');
19+
border-radius: 4px;
20+
overflow: auto;
21+
}
22+
</style>

‎src/tools/markdown-cheatsheet/md-memo.content.md

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
layout: default
3+
title: Markdown Cheat Sheet
4+
description: A quick reference to the Markdown syntax.
5+
last_modified_at: 2021-12-05
6+
---
7+
8+
## Overview
9+
10+
This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can't cover every edge case, so if you need more information about any of these elements, refer to the reference guides for <n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/">basic-syntax</n-a> and <n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/">extended-syntax</n-a>.
11+
12+
## Basic Syntax
13+
14+
These are the elements outlined in John Gruber's original design document. All Markdown applications support these elements.
15+
16+
<n-table :single-line="false">
17+
<thead>
18+
<tr>
19+
<th>Element</th>
20+
<th>Markdown Syntax</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr>
25+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#headings">Heading</n-a></td>
26+
<td><code># H1<br>
27+
## H2<br>
28+
### H3</code></td>
29+
</tr>
30+
<tr>
31+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#bold">Bold</n-a></td>
32+
<td><code>**bold text**</code></td>
33+
</tr>
34+
<tr>
35+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#italic">Italic</n-a></td>
36+
<td><code>*italicized text*</code></td>
37+
</tr>
38+
<tr>
39+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#blockquotes-1">Blockquote</n-a></td>
40+
<td><code>> blockquote</code></td>
41+
</tr>
42+
<tr>
43+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#ordered-lists">Ordered List</n-a></td>
44+
<td><code>
45+
1. First item<br>
46+
2. Second item<br>
47+
3. Third item<br>
48+
</code></td>
49+
</tr>
50+
<tr>
51+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#unordered-lists">Unordered List</n-a></td>
52+
<td>
53+
<code>
54+
- First item<br>
55+
- Second item<br>
56+
- Third item<br>
57+
</code>
58+
</td>
59+
</tr>
60+
<tr>
61+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#code">Code</n-a></td>
62+
<td><code>`code`</code></td>
63+
</tr>
64+
<tr>
65+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#horizontal-rules">Horizontal Rule</n-a></td>
66+
<td><code>---</code></td>
67+
</tr>
68+
<tr>
69+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#links">Link</n-a></td>
70+
<td><code>[title](https://www.example.com)</code></td>
71+
</tr>
72+
<tr>
73+
<td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#images-1">Image</n-a></td>
74+
<td><code>![alt text](image.jpg)</code></td>
75+
</tr>
76+
</tbody>
77+
</n-table>
78+
79+
## Extended Syntax
80+
81+
These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.
82+
83+
<n-table :single-line="false">
84+
<thead>
85+
<tr>
86+
<th>Element</th>
87+
<th>Markdown Syntax</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
<tr>
92+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#tables">Table</n-a></td>
93+
<td><code>
94+
| Syntax | Description |<br>
95+
| ----------- | ----------- |<br>
96+
| Header | Title |<br>
97+
| Paragraph | Text |
98+
</code></td>
99+
</tr>
100+
<tr>
101+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#fenced-code-blocks">Fenced Code Block</n-a></td>
102+
<td><code>```<br>
103+
{<br>
104+
&nbsp;&nbsp;"firstName": "John",<br>
105+
&nbsp;&nbsp;"lastName": "Smith",<br>
106+
&nbsp;&nbsp;"age": 25<br>
107+
}<br>
108+
```
109+
</code></td>
110+
</tr>
111+
<tr>
112+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#footnotes">Footnote</n-a></td>
113+
<td><code>
114+
Here's a sentence with a footnote. [^1]<br><br>
115+
[^1]: This is the footnote.
116+
</code></td>
117+
</tr>
118+
<tr>
119+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#heading-ids">Heading ID</n-a></td>
120+
<td><code>### My Great Heading {#custom-id}</code></td>
121+
</tr>
122+
<tr>
123+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#definition-lists">Definition List</n-a></td>
124+
<td><code>
125+
term<br>
126+
: definition
127+
</code></td>
128+
</tr>
129+
<tr>
130+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#strikethrough">Strikethrough</n-a></td>
131+
<td><code>~~The world is flat.~~</code></td>
132+
</tr>
133+
<tr>
134+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#task-lists">Task List</n-a></td>
135+
<td><code>
136+
- [x] Write the press release<br>
137+
- [ ] Update the website<br>
138+
- [ ] Contact the media
139+
</code></td>
140+
</tr>
141+
<tr>
142+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#emoji">Emoji</n-a><br>(see also <n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#copying-and-pasting-emoji">Copying and Pasting Emoji</n-a>)</td>
143+
<td><code>
144+
That is so funny! :joy:
145+
</code></td>
146+
</tr>
147+
<tr>
148+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#highlight">Highlight</n-a></td>
149+
<td><code>
150+
I need to highlight these ==very important words==.
151+
</code></td>
152+
</tr>
153+
<tr>
154+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#subscript">Subscript</n-a></td>
155+
<td><code>
156+
H~2~O
157+
</code></td>
158+
</tr>
159+
<tr>
160+
<td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#superscript">Superscript</n-a></td>
161+
<td><code>
162+
X^2^
163+
</code></td>
164+
</tr>
165+
</tbody>
166+
</n-table>

0 commit comments

Comments
 (0)