ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-04-16 15:08:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #191 from andzejsp/code-block-style

Browse Source 
Code block style
This commit is contained in:
Saifeddine ALOUI 2023-05-15 16:24:00 +02:00 committed by GitHub
commit bb82eaa64e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 73 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/dist/assets/index-0f4879e0.css vendored
View File

File diff suppressed because one or more lines are too long

38
web/dist/assets/index-45c321b0.js → web/dist/assets/index-7474fb03.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/dist/assets/index-be51aada.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-45c321b0.js"></script>
<link rel="stylesheet" href="/assets/index-0f4879e0.css">
<script type="module" crossorigin src="/assets/index-7474fb03.js"></script>
<link rel="stylesheet" href="/assets/index-be51aada.css">
</head>
<body>
<div id="app"></div>

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">