ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-20 17:22:47 +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">
<title>GPT4All - WEBUI</title>
<script type="module" crossorigin src="/assets/index-bdb44707.js"></script>
<link rel="stylesheet" href="/assets/index-132e5b50.css">
<script type="module" crossorigin src="/assets/index-37f29646.js"></script>
<link rel="stylesheet" href="/assets/index-dac235b9.css">
</head>
<body>
<div id="app"></div>

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

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