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

Refactored tool to use existing markdown component, added code highlighting

Browse source
This commit is contained in:
Isaiah 2023-12-03 15:13:28 -05:00
parent 7c689148d5
commit 1e47eb8570
3 changed files with 13 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

8
src/ui/c-markdown/c-markdown.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { marked } from 'marked';
import DomPurify from 'dompurify';
import highlight from "highlight.js";
import 'highlight.js/styles/atom-one-dark.css';
const props = withDefaults(defineProps<{ markdown?: string }>(), { markdown: '' });
const { markdown } = toRefs(props);
@ -10,6 +12,12 @@ marked.use({
link(href, title, text) {
return `<a class="text-primary transition decoration-none hover:underline" href="${href}" target="_blank" rel="noopener">${text}</a>`;
},
code(code: string, infoString: string = '') {
const validLanguage = highlight.getLanguage(infoString) ? infoString : 'plaintext'
const highlightedCode = highlight.highlight(validLanguage, code).value;
return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
}
},
});