ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-21 17:36:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweaked markdown rendering

Browse Source
This commit is contained in:
ParisNeo 2023-05-07 10:39:09 +02:00
parent 3834c8b211
commit 7b7777e370
6 changed files with 94 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/dist/assets/index-132e5b50.css vendored
View File

File diff suppressed because one or more lines are too long

36
web/dist/assets/index-37f29646.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
web/dist/assets/index-bdb44707.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/dist/assets/index-dac235b9.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT4All - WEBUI</title> <title>GPT4All - WEBUI</title>
<script type="module" crossorigin src="/assets/index-bdb44707.js"></script> <script type="module" crossorigin src="/assets/index-37f29646.js"></script>
<link rel="stylesheet" href="/assets/index-132e5b50.css"> <link rel="stylesheet" href="/assets/index-dac235b9.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

88
web/src/components/MarkdownRenderer.vue
View File

@ -1,22 +1,19 @@
<template> <template>
<div :class="['markdown', isDarkMode ? 'dark' : 'light']"> <div>
<div v-html="renderedMarkdown"></div> <div v-html="renderedMarkdown" class=""></div>
</div> </div>
</template> </template>
<script> <script>
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import emoji from 'markdown-it-emoji'; import emoji from 'markdown-it-emoji';
import hljs from 'highlight.js';
export default { export default {
props: { props: {
markdownText: { markdownText: {
type: String, type: String,
required: true required: true
},
isDarkMode: {
type: Boolean,
default: false
} }
}, },
data() { data() {
@ -25,43 +22,68 @@
}; };
}, },
mounted() { mounted() {
this.renderMarkdown(); const markdownIt = new MarkdownIt({
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'<pre class="hljs rounded-lg dark:bg-primary shadow-lg"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>'
);
} catch (__) {}
}
return (
'<pre class="hljs rounded-lg dark:bg-primary shadow-lg"><code>' +
markdownIt.utils.escapeHtml(str) +
'</code></pre>'
);
}
}).use(emoji);
this.renderedMarkdown = markdownIt.render(this.markdownText);
}, },
watch: { watch: {
markdownText(newText) { markdownText(newText) {
this.renderMarkdown(newText); const markdownIt = new MarkdownIt({
}, highlight: (str, lang) => {
isDarkMode() { if (lang && hljs.getLanguage(lang)) {
this.renderMarkdown(); try {
} return (
}, '<pre class="hljs rounded-lg dark:bg-primary shadow-lg"><code>' +
methods: { hljs.highlight(lang, str, true).value +
renderMarkdown(text) { '</code></pre>'
const markdownIt = new MarkdownIt().use(emoji); );
this.renderedMarkdown = markdownIt.render(text || this.markdownText); } catch (__) {}
}
return (
'<pre class="hljs rounded-lg dark:bg-primary shadow-lg"><code>' +
markdownIt.utils.escapeHtml(str) +
'</code></pre>'
);
}
}).use(emoji);
this.renderedMarkdown = markdownIt.render(newText);
} }
} }
}; };
</script> </script>
<style scoped> <style>
.markdown { /* Add styles for code highlighting */
/* Add Tailwind CSS classes for general styling */ .hljs {
padding: 1rem; display: block;
box-shadow: sm; overflow-x: auto;
border-radius: 5px; padding: 0.5em;
background: #f5f5f5;
} }
.light { .hljs code {
/* Add Tailwind CSS classes for light mode */ display: inline;
background-color: #ffffff; padding: 0;
color: #000000; border: none;
} background: none;
.dark {
/* Add Tailwind CSS classes for dark mode */
background-color: #1a202c;
color: #ffffff;
} }
</style> </style>