mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-07 23:05:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added syntax highlighting

Browse source
This commit is contained in:
Isaiah 2023-12-02 20:42:00 -05:00
parent d48119bf06
commit b14283ff64
3 changed files with 19 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -78,7 +78,6 @@
"pinia": "^2.0.34",
"plausible-tracker": "^0.3.8",
"qrcode": "^1.5.1",
"showdown": "^2.1.0",
"sql-formatter": "^13.0.0",
"ua-parser-js": "^1.0.35",
"ulid": "^2.3.0",
@ -109,7 +108,6 @@
"@types/node": "^18.15.11",
"@types/node-forge": "^1.3.2",
"@types/qrcode": "^1.5.0",
"@types/showdown": "^2.0.6",
"@types/ua-parser-js": "^0.7.36",
"@types/uuid": "^9.0.0",
"@unocss/eslint-config": "^0.57.0",

22
pnpm-lock.yaml generated
View file

@ -134,9 +134,6 @@ dependencies:
qrcode:
specifier: ^1.5.1
version: 1.5.1
showdown:
specifier: ^2.1.0
version: 2.1.0
sql-formatter:
specifier: ^13.0.0
version: 13.0.0
@ -223,9 +220,6 @@ devDependencies:
'@types/qrcode':
specifier: ^1.5.0
version: 1.5.0
'@types/showdown':
specifier: ^2.0.6
version: 2.0.6
'@types/ua-parser-js':
specifier: ^0.7.36
version: 0.7.36
@ -3068,10 +3062,6 @@ packages:
resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
dev: true
/@types/showdown@2.0.6:
resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
dev: true
/@types/throttle-debounce@2.1.0:
resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
dev: false
@ -4573,11 +4563,6 @@ packages:
engines: {node: '>= 10'}
dev: true
/commander@9.5.0:
resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
engines: {node: ^12.20.0 || >=14}
dev: false
/common-tags@1.8.2:
resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
engines: {node: '>=4.0.0'}
@ -8127,13 +8112,6 @@ packages:
engines: {node: '>=8'}
dev: true
/showdown@2.1.0:
resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
hasBin: true
dependencies:
commander: 9.5.0
dev: false
/side-channel@1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
dependencies:

25
src/tools/markdown-viewer/markdown-viewer.vue
View file

@ -1,11 +1,24 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core';
import showdown from 'showdown'
import CCard from "@/ui/c-card/c-card.vue";
const converter = new showdown.Converter()
import { marked } from "marked";
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>();
const rawMd = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
import highlight from "highlight.js";
import 'highlight.js/styles/default.css';
const renderMarkdown = (md: string) => {
const renderer = new marked.Renderer();
// Override the code rendering function to use highlight.js for syntax highlighting
renderer.code = (code: string, language: string) => {
const validLanguage = highlight.getLanguage(language) ? language : 'plaintext';
return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`;
};
marked.use({ renderer });
return marked.parse(md)
}
</script>
@ -27,7 +40,7 @@ const rawMd = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "b
/>
</n-form-item>
<n-form-item label="Prettified version of your MD">
<c-card style="width: 100%; overflow: scroll" v-html="converter.makeHtml(rawMd)"></c-card>
<c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)"></c-card>
</n-form-item>
</template>