Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new syntax highlighter #211

Merged
merged 19 commits into from
Dec 24, 2024
Merged

feat: new syntax highlighter #211

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d1809e5
feat: replace prismjs by highlightjs
Jurredr Dec 20, 2024
b8bc20b
fix: code block tooltip highlights no longer hidden
Jurredr Dec 20, 2024
f18b98b
feat: updated styles for new syntax highlighting
Jurredr Dec 20, 2024
5a10376
chore: ran formatter
Jurredr Dec 20, 2024
77b6cd8
chore: updated marked version to comply with highlightjs and fixed li…
Jurredr Dec 23, 2024
b8ecdb2
chore: linting fixes
Jurredr Dec 23, 2024
d6c51a6
fix: updated syntax higlighter unit test for new library
Jurredr Dec 23, 2024
2fd53e4
chore: update third party licenses
Jurredr Dec 23, 2024
62cbce9
chore: updated test images
Jurredr Dec 23, 2024
24c07e5
fix: changed default syntax highlighter language to 'c'
Jurredr Dec 23, 2024
7147cfd
fix: task checkboxes appearing twice
Jurredr Dec 23, 2024
f43bed2
feat: link new token theming to current css vairables
Jurredr Dec 23, 2024
19baa6c
chore: merge syntax highlighter styles into one file
Jurredr Dec 24, 2024
e48d8f3
chore: bumped marked back up to 14.1.0
Jurredr Dec 24, 2024
500760c
chore: ran formatter
Jurredr Dec 24, 2024
cdb9c0a
test: enable all tests again, update markdown test snapshot
Jurredr Dec 24, 2024
6031f42
style: improved token highlighting for functions
Jurredr Dec 24, 2024
bbc08c0
chore: ran formatter
Jurredr Dec 24, 2024
1ef3324
chore: removed unnecessary comments
Jurredr Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 30 additions & 60 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,16 @@
},
"dependencies": {
"escape-html": "^1.0.3",
"highlight.js": "^11.11.0",
"just-clone": "^6.2.0",
"marked": "^14.1.0",
"prismjs": "1.29.0",
"marked": "^12.0.2",
Jurredr marked this conversation as resolved.
Show resolved Hide resolved
"sanitize-html": "^2.12.1",
"unescape-html": "^1.1.0"
},
"peerDependencies": {
"escape-html": "^1.0.3",
"just-clone": "^6.2.0",
"marked": "^12.0.2",
"prismjs": "1.29.0",
"sanitize-html": "^2.12.1",
"unescape-html": "^1.1.0"
},
Expand All @@ -59,7 +58,6 @@
"@types/jest": "^29.5.5",
"@types/json-schema": "7.0.7",
"@types/node": "17.0.29",
"@types/prismjs": "^1.26.2",
"@types/sanitize-html": "^2.11.0",
"@typescript-eslint/eslint-plugin": "^5.34.0",
"@typescript-eslint/parser": "^5.62.0",
Expand Down
103 changes: 27 additions & 76 deletions src/components/syntax-highlighter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,6 @@
*/

import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
import { highlightElement } from 'prismjs';

import 'prismjs/components/prism-markup.min';
import 'prismjs/components/prism-xml-doc.min';
import 'prismjs/components/prism-css.min';
import 'prismjs/components/prism-clike.min';
import 'prismjs/components/prism-javascript.min';
import 'prismjs/components/prism-typescript.min';
import 'prismjs/components/prism-jsx.min';
import 'prismjs/components/prism-diff.min';
import 'prismjs/components/prism-tsx.min';
import 'prismjs/components/prism-lua.min';
import 'prismjs/components/prism-java.min';
import 'prismjs/components/prism-json.min';
import 'prismjs/components/prism-markdown.min';
import 'prismjs/components/prism-mongodb.min';
import 'prismjs/components/prism-c.min';
import 'prismjs/components/prism-bash.min';
import 'prismjs/components/prism-go.min';
import 'prismjs/components/prism-csharp.min';
import 'prismjs/components/prism-objectivec.min';
import 'prismjs/components/prism-python.min';
import 'prismjs/components/prism-regex.min';
import 'prismjs/components/prism-swift.min';
import 'prismjs/components/prism-scala.min';
import 'prismjs/components/prism-scss.min';
import 'prismjs/components/prism-less.min';
import 'prismjs/components/prism-ruby.min';
import 'prismjs/components/prism-rust.min';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/keep-markup/prism-keep-markup.js';
import 'prismjs/plugins/diff-highlight/prism-diff-highlight.min';

import {
CodeBlockActions,
Expand All @@ -47,43 +15,13 @@ import { Icon } from './icon';
import { cancelEvent } from '../helper/events';
import { highlightersWithTooltip } from './card/card-body';
import escapeHTML from 'escape-html';
import '../styles/components/_syntax-highlighter.scss';
import { copyToClipboard } from '../helper/chat-item';
import testIds from '../helper/test-ids';
import unescapeHTML from 'unescape-html';

const langs = [
'markup',
'xml',
'css',
'clike',
'diff',
'javascript',
'typescript',
'jsx',
'tsx',
'lua',
'java',
'json',
'go',
'markdown',
'mongodb',
'c',
'bash',
'csharp',
'objectivec',
'python',
'regex',
'swift',
'scala',
'scss',
'less',
'ruby',
'rust',
];

const IMPORTED_LANGS = [ ...langs, ...(langs.map(lang => `diff-${lang}`)) ];
const DEFAULT_LANG = 'clike';
import hljs from 'highlight.js';
import '../styles/components/syntax/_syntax-highlighter.scss';
import '../styles/components/syntax/_syntax-theme.scss';
import { mergeHTMLPlugin } from '../helper/merge-html-plugin';

export interface SyntaxHighlighterProps {
codeStringWithMarkup: string;
Expand All @@ -105,6 +43,9 @@ export class SyntaxHighlighter {
constructor (props: SyntaxHighlighterProps) {
this.props = props;

hljs.addPlugin(mergeHTMLPlugin);
hljs.configure({ ignoreUnescapedHTML: true });

// To ensure we are not leaving anything unescaped before escaping i.e to prevent double escaping
let escapedCodeBlock = escapeHTML(unescapeHTML(props.codeStringWithMarkup));

Expand All @@ -114,19 +55,30 @@ export class SyntaxHighlighter {
.replace(new RegExp(escapeHTML(highlightersWithTooltip.start.markupEnd), 'g'), highlightersWithTooltip.start.markupEnd)
.replace(new RegExp(escapeHTML(highlightersWithTooltip.end.markup), 'g'), highlightersWithTooltip.end.markup);

const codeElement = DomBuilder.getInstance().build({
type: 'code',
classNames: [
...(props.language !== undefined ? [ `language-${props.language.replace('diff-', '')}` ] : [ (props.block ?? false) ? '' : 'language-plaintext' ]),
...(props.showLineNumbers === true ? [ 'line-numbers' ] : []),
],
innerHTML: escapedCodeBlock
});
hljs.highlightElement(codeElement);

// Overlay another code element for diffs, as highlight.js doesn't allow multiple language styles
const diffOverlay = DomBuilder.getInstance().build({
type: 'code',
classNames: [ 'diff', 'language-diff' ],
innerHTML: escapedCodeBlock
});
hljs.highlightElement(diffOverlay);

const preElement = DomBuilder.getInstance().build({
type: 'pre',
testId: testIds.chatItem.syntaxHighlighter.codeBlock,
classNames: [ 'keep-markup',
`language-${props.language !== undefined && IMPORTED_LANGS.includes(props.language) ? props.language : DEFAULT_LANG}`,
...(((props.language?.match('diff')) != null) ? [ 'diff-highlight' ] : []),
...(props.showLineNumbers === true ? [ 'line-numbers' ] : []),
],
children: [
{
type: 'code',
innerHTML: escapedCodeBlock,
}
codeElement,
((props.language?.match('diff')) != null) ? diffOverlay : ''
],
events: {
copy: (e) => {
Expand All @@ -140,7 +92,6 @@ export class SyntaxHighlighter {
}
}
});
highlightElement(preElement);

if (props.codeBlockActions != null) {
Object.keys(props.codeBlockActions).forEach((actionId: string) => {
Expand Down
Loading
Loading