mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-26 15:31:04 +00:00
finally fixed codeblock issues
This commit is contained in:
parent
d767de86a2
commit
3fb9bb9a98
web/src/components
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class=" break-all w-full">
|
||||
<div class=" break-all ">
|
||||
<div v-html="renderedMarkdown" class=""></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,36 +32,30 @@ const markdownIt = new MarkdownIt('commonmark', {
|
||||
|
||||
|
||||
return (
|
||||
'<div class="hljs language-html break-all whitespace-pre p-2 rounded-lg shadow-sm ">' +
|
||||
'<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm ">' +
|
||||
languageCapital +
|
||||
|
||||
'<pre class="break-all whitespace-pre p-1 overflow-x-auto 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-1 rounded-md break-all grid grid-cols-1 ">' +
|
||||
|
||||
'<code>' +
|
||||
'<code class="overflow-x-auto break-all 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 ">' +
|
||||
hljs.highlightAuto(str).value +
|
||||
'</code></pre>' + '</div>'
|
||||
);
|
||||
|
||||
} catch (__) { }
|
||||
}
|
||||
// return (
|
||||
// '<pre class="hljs p-4 overflow-x-auto rounded-lg shadow-sm 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>'
|
||||
// );
|
||||
|
||||
|
||||
return (
|
||||
'<div class="hljs language-html break-all whitespace-pre p-2 rounded-lg shadow-sm ">' +
|
||||
'<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm ">' +
|
||||
languageCapital +
|
||||
|
||||
'<pre class="break-all whitespace-pre p-1 overflow-x-auto 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-1 rounded-md break-all grid grid-cols-1 ">' +
|
||||
|
||||
'<code>' +
|
||||
'<code class="overflow-x-auto break-all 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 ">' +
|
||||
markdownIt.utils.escapeHtml(str) +
|
||||
'</code></pre>' + '</div>'
|
||||
);
|
||||
|
||||
}
|
||||
}).use(emoji);
|
||||
|
||||
@ -116,4 +110,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style type='text/css'></style>
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2">
|
||||
<div class="flex flex-row flex-grow gap-2">
|
||||
<div class="flex-shrink-0">
|
||||
class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-x-hidden p-4 pb-2">
|
||||
<div class="flex flex-row gap-2 ">
|
||||
<div class="flex-shrink-0 ">
|
||||
<!-- AVATAR -->
|
||||
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-grow ">
|
||||
<div class="flex flex-col w-full flex-grow-0 ">
|
||||
<div class="flex flex-row flex-grow items-start ">
|
||||
<!-- SENDER NAME -->
|
||||
<div class="flex ">
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
</div>
|
||||
<!-- MESSAGE CONTROLS -->
|
||||
<div class="flex-row justify-end">
|
||||
<div class="flex-row justify-end mx-2">
|
||||
<div class="invisible group-hover:visible flex flex-row ">
|
||||
<!-- MESSAGE CONTROLS -->
|
||||
<!-- EDIT CONFIRMATION -->
|
||||
@ -81,9 +81,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<div class="overflow-x-auto w-full " >
|
||||
<!-- MESSAGE CONTENT -->
|
||||
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content">
|
||||
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content" >
|
||||
</MarkdownRenderer>
|
||||
<textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
|
||||
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
|
Loading…
Reference in New Issue
Block a user