This commit is contained in:
Isaiah 2023-12-02 22:24:43 -05:00
parent 6b1a8d76e5
commit 7c689148d5
2 changed files with 6 additions and 5 deletions

View file

@ -2,9 +2,9 @@ import { marked } from 'marked';
import highlight from 'highlight.js'; import highlight from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'; import 'highlight.js/styles/atom-one-dark.css';
export { renderMarkdown } export { renderMarkdown };
const renderMarkdown = (md: string): string => { function renderMarkdown(md: string): string {
const renderer = new marked.Renderer(); const renderer = new marked.Renderer();
// Override the code rendering function to use highlight.js for syntax highlighting // Override the code rendering function to use highlight.js for syntax highlighting
@ -18,8 +18,9 @@ const renderMarkdown = (md: string): string => {
try { try {
return marked(md); return marked(md);
} catch (error) { }
catch (error) {
console.error('Markdown parsing error:', error); console.error('Markdown parsing error:', error);
return `<p>Error rendering Markdown</p>`; return '<p>Error rendering Markdown</p>';
} }
} }

View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useElementSize, useStorage } from '@vueuse/core'; import { useElementSize, useStorage } from '@vueuse/core';
import { renderMarkdown } from './markdown-viewer.service'; import { renderMarkdown } from './markdown-viewer.service';
const inputElement = ref<HTMLElement>(); const inputElement = ref<HTMLElement>();
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World'); const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const { height } = useElementSize(inputElement); const { height } = useElementSize(inputElement);
@ -10,7 +11,6 @@ const cardStyles = computed(() => ({
overflow: 'scroll', overflow: 'scroll',
maxHeight: `${height.value}px`, maxHeight: `${height.value}px`,
})); }));
</script> </script>
<template> <template>