fix: Improve code snippets display in chats
This commit is contained in:
parent
46b81b30a6
commit
3ab95fea1d
|
@ -69,6 +69,43 @@ Item {
|
||||||
|
|
||||||
return Utils.getMessageWithStyle(formattedMessage)
|
return Utils.getMessageWithStyle(formattedMessage)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function highlightCodeBlocks(text) {
|
||||||
|
var codeBlockPattern = /```([^`]+)```/g;
|
||||||
|
|
||||||
|
text = text.replace(/<code>([\s\S]+?)<\/code>/g, function(match, codeBlock) {
|
||||||
|
return '```' + codeBlock + '```';
|
||||||
|
});
|
||||||
|
|
||||||
|
var highlightedText = text.replace(codeBlockPattern, function(match, codeBlock) {
|
||||||
|
var codeBlock = addLineSpaces(codeBlock)
|
||||||
|
return "<pre style=\"background-color:" + Theme.palette.baseColor2 + "; padding: 10px;\"><code>" +
|
||||||
|
highlightSyntax(codeBlock) + "</code></pre>";
|
||||||
|
});
|
||||||
|
return highlightedText.replace(/\n/g, "<br>");
|
||||||
|
}
|
||||||
|
|
||||||
|
function addLineSpaces(code) {
|
||||||
|
return code.split("\n")
|
||||||
|
.map((line, index) => index === 0 ? `\n ${line}` : ` ${line}`)
|
||||||
|
.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightSyntax(code) {
|
||||||
|
var keywords = "\\b(abstract|arguments|await|boolean|break|byte|case|catch|char|class|const|continue|" +
|
||||||
|
"debugger|default|delete|do|double|else|enum|eval|export|extends|false|final|finally|float|" +
|
||||||
|
"for|function|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|" +
|
||||||
|
"package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|" +
|
||||||
|
"throws|transient|true|try|typeof|var|void|volatile|while|with|yield|" +
|
||||||
|
"uint32_t|uint64_t|void|char|float|double|bool|long|short|int|" +
|
||||||
|
"signed|unsigned|const|volatile|static|inline|extern|mutable|class|struct|namespace|using|public|private|protected|virtual|template|typename|new|delete|sizeof|define)\\b";
|
||||||
|
var strings = /'[^']*'|"[^"]*"|`[^`]*`/g;
|
||||||
|
|
||||||
|
code = code.replace(strings, '<span style="color: green;">$&</span>');
|
||||||
|
code = code.replace(new RegExp(keywords, 'g'), '<span style="color: brown;">$1</span>');
|
||||||
|
|
||||||
|
return code;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
|
@ -92,7 +129,7 @@ Item {
|
||||||
anchors.leftMargin: d.isQuote ? 8 : 0
|
anchors.leftMargin: d.isQuote ? 8 : 0
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
|
opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
|
||||||
text: d.text
|
text: d.highlightCodeBlocks(d.text)
|
||||||
selectedTextColor: Theme.palette.directColor1
|
selectedTextColor: Theme.palette.directColor1
|
||||||
selectionColor: Theme.palette.primaryColor3
|
selectionColor: Theme.palette.primaryColor3
|
||||||
color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
|
color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
|
||||||
|
|
Loading…
Reference in New Issue