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

Error handling

Browse source
This commit is contained in:
Isaiah 2023-12-02 22:17:53 -05:00
parent e43e6fbe1e
commit 6b1a8d76e5
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,18 +2,24 @@ import { marked } from 'marked';
import highlight from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
export { renderMarkdown };
export { renderMarkdown }
function renderMarkdown(md: string) {
const renderMarkdown = (md: string): 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>`;
const highlightedCode = highlight.highlight(validLanguage, code).value;
return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
};
marked.use({ renderer });
marked.setOptions({ renderer });
return marked.parse(md);
try {
return marked(md);
} catch (error) {
console.error('Markdown parsing error:', error);
return `<p>Error rendering Markdown</p>`;
}
}

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

@ -1,12 +1,16 @@
<script setup lang="ts">
import { useElementSize, useStorage } from '@vueuse/core';
import { renderMarkdown } from './markdown-viewer.service';
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>();
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const { height } = useElementSize(inputElement);
const cardStyles = computed(() => ({
width: '100%',
overflow: 'scroll',
maxHeight: `${height.value}px`,
}));
</script>
<template>
@ -27,6 +31,6 @@ const { height } = useElementSize(inputElement);
/>
</n-form-item>
<n-form-item label="Prettified version of your markdown">
<c-card :style="`width: 100%; overflow: scroll; max-height: ${`${height.valueOf()}px`}`" v-html="renderMarkdown(rawMd)" />
<c-card :style="cardStyles" v-html="renderMarkdown(rawMd)" />
</n-form-item>
</template>