Skip to content

ES|QL highlighting #8317

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

Merged
weronikaolejniczak merged 12 commits into from
Feb 13, 2025
Merged

ES|QL highlighting #8317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e40dfd9
install esql grammar
vadimkibana Feb 11, 2025
80c088d
register refractor esql grammar
vadimkibana Feb 11, 2025
992af53
do not color inline code block texts
vadimkibana Feb 11, 2025
43fc6b1
make keyword color different from plain text
vadimkibana Feb 12, 2025
d0f6bcc
format as per linter
vadimkibana Feb 12, 2025
665d877
add changelog entry
vadimkibana Feb 12, 2025
e87059a
add changelog file
vadimkibana Feb 13, 2025
5a422c3
Merge branch 'main' into refractor-esql-grammar
vadimkibana Feb 13, 2025
52e9c97
revert manual changelog update
vadimkibana Feb 13, 2025
94edc51
use more narrow type
vadimkibana Feb 13, 2025
e55cdab
Merge branch 'refractor-esql-grammar' of https://github.com/vadimkiba…
vadimkibana Feb 13, 2025
5cabb47
run formatter
vadimkibana Feb 13, 2025
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
2 changes: 1 addition & 1 deletion packages/eui/changelogs/CHANGELOG_2025.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

- Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](https://github.com/elastic/eui/pull/8208))
- Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([#8255](https://github.com/elastic/eui/pull/8255))
- Added suppport for `titleColor` variant `warning` on `EuiStat` ([#8278](https://github.com/elastic/eui/pull/8278))
- Added support for `titleColor` variant `warning` on `EuiStat` ([#8278](https://github.com/elastic/eui/pull/8278))

## [`v99.0.0`](https://github.com/elastic/eui/releases/v99.0.0)

Expand Down
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/8317.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`, `EuiMarkdownFormat`, and `EuiMarkdownEditor` components.
1 change: 1 addition & 0 deletions packages/eui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"url": "https://github.com/elastic/eui.git"
},
"dependencies": {
"@elastic/prismjs-esql": "^1.0.0",
"@hello-pangea/dnd": "^16.6.0",
"@types/lodash": "^4.14.202",
"@types/numeral": "^2.0.5",
Expand Down
5 changes: 5 additions & 0 deletions packages/eui/src/components/code/code.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
color: ${codeSyntaxVariables.inlineCodeColor};

${codeSyntaxVariables.tokensCss}

.token.atrule .token.rule,
.token.keyword {
color: ${codeSyntaxVariables.inlineCodeKeywordColor};
}
Comment on lines +33 to +36
Copy link
Contributor Author

@vadimkibana vadimkibana Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently keyword color is the same as plain inline text color: ${codeSyntaxVariables.inlineCodeColor};.

This change makes the keywords pop out.

`,
transparentBackground: css`
background: transparent;
Expand Down
3 changes: 3 additions & 0 deletions packages/eui/src/components/code/code_syntax.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export const euiCodeSyntaxVariables = ({ euiTheme }: UseEuiTheme) => {
nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
inlineCodeKeywordColor: makeHighContrastColor(visColors[6])(
backgroundColor
),
functionTitleColor: 'inherit',
typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
attributeColor: 'inherit',
Expand Down
12 changes: 11 additions & 1 deletion packages/eui/src/components/code/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,16 @@ import React, {
ReactNode,
HTMLAttributes,
} from 'react';
import { listLanguages, highlight, AST, RefractorNode } from 'refractor';
import {
listLanguages,
highlight,
AST,
RefractorNode,
register,
type RefractorSyntax,
} from 'refractor';
import { cx } from '@emotion/css';
import { esql as esqlLanguage } from '@elastic/prismjs-esql';

import { CommonProps } from '../common';
import { UseEuiTheme } from '../../services';
Expand All @@ -24,6 +32,8 @@ import {
} from './code_block_annotations';
import { euiCodeBlockLineStyles } from './code_block_line.styles';

register(esqlLanguage as RefractorSyntax);

/**
* Utils shared between EuiCode and EuiCodeBlock
*/
Expand Down
8 changes: 8 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4770,6 +4770,7 @@ __metadata:
"@cypress/webpack-dev-server": "npm:^1.7.0"
"@elastic/charts": "npm:^64.1.0"
"@elastic/datemath": "npm:^5.0.3"
"@elastic/prismjs-esql": "npm:^1.0.0"
"@emotion/babel-preset-css-prop": "npm:^11.11.0"
"@emotion/cache": "npm:^11.11.0"
"@emotion/css": "npm:^11.11.0"
Expand Down Expand Up @@ -4964,6 +4965,13 @@ __metadata:
languageName: unknown
linkType: soft

"@elastic/prismjs-esql@npm:^1.0.0":
version: 1.0.0
resolution: "@elastic/prismjs-esql@npm:1.0.0"
checksum: 10c0/3cdf879859da03f5e68d6e730972e4142556c9dfb0eb2bc96bceb2ae2463e2c76a62af7335dd181c5b24716060879c8eac87ee98ae23a218aae3c2e1aabd63ef
languageName: node
linkType: hard

"@elastic/transport@npm:^8.9.1":
version: 8.9.4
resolution: "@elastic/transport@npm:8.9.4"
Expand Down