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

some progress

Browse Source
This commit is contained in:
AndzejsP 2023-05-13 16:19:14 +03:00
parent ab5e3d9f85
commit 331548f5d5
2 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,46 @@
<div v-html="renderedMarkdown" class=""></div>
</div>
</template>
<script>
import { nextTick } from 'vue'
import feather from 'feather-icons'
import MarkdownIt from 'markdown-it';
import emoji from 'markdown-it-emoji';
import 'highlight.js/styles/tomorrow-night-blue.css'
//import 'highlight.js/styles/tokyo-night-dark.css'
import hljs from 'highlight.js';
const markdownIt = new MarkdownIt('commonmark', {
html: false,
xhtmlOut: true,
breaks: true,
linkify: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'<pre class="hljs p-4 overflow-x-auto shadow-lg scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">'+
'<code>' +
hljs.highlight(str, { language: lang }).value +
'</code></pre>'
);
} catch (__) { }
}
return (
'<pre class="hljs p-4 overflow-x-auto shadow-lg scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">'+
'<code>' +
markdownIt.utils.escapeHtml(str) +
'</code></pre>'
);
}
}).use(emoji);
export default {
name: 'MarkdownRenderer',
props: {
@ -23,54 +57,27 @@ export default {
};
},
mounted() {
const markdownIt = new MarkdownIt({
html: false,
xhtmlOut: true,
breaks: true,
linkify: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>'
);
} catch (__) { }
}
return (
'<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
markdownIt.utils.escapeHtml(str) +
'</code></pre>'
);
}
}).use(emoji);
this.renderedMarkdown = markdownIt.render(this.markdownText);
nextTick(() => {
feather.replace()
})
},
methods: {
copyContentToClipboard() {
navigator.clipboard.writeText(theCode);
},
},
watch: {
markdownText(newText) {
const markdownIt = new MarkdownIt({
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>'
);
} catch (__) { }
}
return (
'<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
markdownIt.utils.escapeHtml(str) +
'</code></pre>'
);
}
}).use(emoji);
this.renderedMarkdown = markdownIt.render(newText);
nextTick(() => {
feather.replace()
})
}
}
};

2
web/src/views/DiscussionsView.vue
View File

@ -112,7 +112,7 @@
</div>
</div>
</div>
<div class="overflow-y-auto flex flex-col scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary flex-grow active:scrollbar-thumb-secondary" id="messages-list">
<div class="overflow-y-auto flex flex-col flex-grow scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" id="messages-list">
<!-- CHAT AREA -->
<div class="container flex flex-col flex-grow pt-4 pb-10">