mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -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

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>