sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add language-specific syntax highlighting via highlight.js (#802)

Browse source 
* Add language-specific syntax highlighting via highlight.js

- Add highlight.js to our assets CDN for fast load and compliance with the CSP
- See other stylesheets options here: https://cdnjs.com/libraries/highlight.js

* Bonus: set min-height to prevent increasing length of the sessions pane

* Fix references rendering and add highlight.js in public conversation
This commit is contained in:
sabaimran 2024-06-08 15:17:09 +05:30 • committed by GitHub
parent 5f2442450c
commit 06a47ee457
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/interface/desktop/chat.html
View file

@ -10,6 +10,8 @@
</head>
<script type="text/javascript" src="./assets/purify.min.js?v={{ khoj_version }}"></script>
<script type="text/javascript" src="./assets/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
<script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
<script src="./utils.js"></script>
<script>
@ -314,6 +316,13 @@
codeElement.parentNode.insertBefore(parentDiv, codeElement);
// Move the code element into the parent div
parentDiv.appendChild(codeElement);
// Check if hijs has been loaded
if (typeof hljs !== 'undefined') {
// Highlight the code block
hljs.highlightBlock(codeElement);
}
// Add a copy button to each element
if (willReplace === true) {
let copyButton = document.createElement('button');
@ -1353,7 +1362,8 @@
}
div#side-panel-wrapper {
display: flex
display: flex;
min-height: 0;
}

9
src/khoj/interface/web/chat.html
View file

@ -30,6 +30,8 @@
<script type="text/javascript" src="/static/assets/purify.min.js?v={{ khoj_version }}"></script>
<script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
<script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
<link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
<script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
<script>
let welcome_message = `
Hi, I am Khoj, your open, personal AI 👋🏽. I can:
@ -447,6 +449,13 @@ To get started, just start typing below. You can also type / to see a list of co
codeElement.parentNode.insertBefore(parentDiv, codeElement);
// Move the code element into the parent div
parentDiv.appendChild(codeElement);
// Check if hijs has been loaded
if (typeof hljs !== 'undefined') {
// Highlight the code block
hljs.highlightBlock(codeElement);
}
// Add a copy button to each code block, if it doesn't already exist
if (willReplace === true) {
let copyButton = document.createElement('button');

17
src/khoj/interface/web/public_conversation.html
View file

@ -16,6 +16,9 @@
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://assets.khoj.dev/katex/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
<link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
<script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
</head>
<script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
<script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
@ -69,12 +72,15 @@ To get started, just start typing below. You can also type / to see a list of co
return `${time_string}, ${date_string}`;
}
function generateReference(reference, index) {
function generateReference(referenceJson, index) {
let reference = referenceJson.hasOwnProperty("compiled") ? referenceJson.compiled : referenceJson;
let referenceFile = referenceJson.hasOwnProperty("file") ? referenceJson.file : null;
// Escape reference for HTML rendering
let escaped_ref = reference.replaceAll('"', '&quot;');
// Generate HTML for Chat Reference
let short_ref = escaped_ref.slice(0, 140);
let short_ref = escaped_ref.slice(0, 100);
short_ref = short_ref.length < escaped_ref.length ? short_ref + "..." : short_ref;
let referenceButton = document.createElement('button');
referenceButton.textContent = short_ref;
@ -383,6 +389,13 @@ To get started, just start typing below. You can also type / to see a list of co
codeElement.parentNode.insertBefore(parentDiv, codeElement);
// Move the code element into the parent div
parentDiv.appendChild(codeElement);
// Check if hijs has been loaded
if (typeof hljs !== 'undefined') {
// Highlight the code block
hljs.highlightBlock(codeElement);
}
// Add a copy button to each code block, if it doesn't already exist
if (willReplace === true) {
let copyButton = document.createElement('button');