ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-25 10:42:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rounded code block, experimenting with css

Browse Source
This commit is contained in:
AndzejsP 2023-06-05 13:46:54 +03:00
parent d0eea8e0d9
commit 4fde7a6c06
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,11 +9,12 @@ import { nextTick } from 'vue'
import feather from 'feather-icons' import feather from 'feather-icons'
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import emoji from 'markdown-it-emoji'; import emoji from 'markdown-it-emoji';
import 'highlight.js/styles/tomorrow-night-blue.css' //import 'highlight.js/styles/tomorrow-night-blue.css'
//import 'highlight.js/styles/tokyo-night-dark.css' //import 'highlight.js/styles/tokyo-night-dark.css'
import hljs from 'highlight.js'; import hljs from 'highlight.js';
const markdownIt = new MarkdownIt('commonmark', { const markdownIt = new MarkdownIt('commonmark', {
html: false, html: false,
xhtmlOut: true, xhtmlOut: true,
@ -26,8 +27,8 @@ const markdownIt = new MarkdownIt('commonmark', {
try { try {
return ( 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">'+ '<pre class="hljs p-4 overflow-x-auto rounded-lg 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>' + '<code>' +
hljs.highlight(str, { language: lang }).value + hljs.highlight(str, { language: lang }).value +
'</code></pre>' '</code></pre>'
); );
@ -35,7 +36,7 @@ const markdownIt = new MarkdownIt('commonmark', {
} catch (__) { } } catch (__) { }
} }
return ( 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">'+ '<pre class="hljs p-4 overflow-x-auto rounded-lg 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>' + '<code>' +
markdownIt.utils.escapeHtml(str) + markdownIt.utils.escapeHtml(str) +
'</code></pre>' '</code></pre>'
@ -53,7 +54,8 @@ export default {
}, },
data() { data() {
return { return {
renderedMarkdown: '' renderedMarkdown: '',
}; };
}, },
mounted() { mounted() {
@ -63,12 +65,17 @@ export default {
feather.replace() feather.replace()
}) })
},
created() {
}, },
methods: { methods: {
copyContentToClipboard() { copyContentToClipboard() {
navigator.clipboard.writeText(theCode); navigator.clipboard.writeText(theCode);
}, },
}, },
watch: { watch: {
markdownText(newText) { markdownText(newText) {
@ -78,7 +85,12 @@ export default {
feather.replace() feather.replace()
}) })
} },
},
computed:{
} }
}; };
</script> </script>