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

Refactor

Browse source
This commit is contained in:
Isaiah 2023-12-02 20:52:04 -05:00
parent b14283ff64
commit ab414f0ea7
2 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/tools/markdown-viewer/markdown-viewer.service.ts
View file

@ -0,0 +1,20 @@
import { marked } from "marked";
import highlight from "highlight.js";
import 'highlight.js/styles/atom-one-dark.css';
export const renderMarkdown = (md: string) => {
highlight.configure({
})
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)
}

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

@ -1,24 +1,8 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core';
import { marked } from "marked";
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>();
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)
}
import { renderMarkdown } from "./markdown-viewer.service";
</script>