@atlaskit/editor-plugin-code-block-advanced/dist/es2019/ui/syntaxHighlightingTheme.js

CodeBlockAdvanced plugin for @atlaskit/editor-core

import { HighlightStyle } from '@codemirror/language';
import { tags } from '@lezer/highlight';
// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
export const highlightStyle = HighlightStyle.define([{
  tag: tags.meta,
  color: "var(--ds-text, #292A2E)"
}, {
  tag: tags.link,
  textDecoration: 'underline'
}, {
  tag: tags.heading,
  textDecoration: 'underline',
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: tags.emphasis,
  fontStyle: 'italic'
}, {
  tag: tags.strong,
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: tags.strikethrough,
  textDecoration: 'line-through'
}, {
  tag: tags.keyword,
  color: "var(--ds-text-accent-blue, #1558BC)",
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: [tags.literal],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: tags.inserted,
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [tags.string],
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [tags.deleted],
  color: "var(--ds-text-accent-red, #AE2E24)"
}, {
  tag: [tags.special(tags.string)],
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [tags.regexp, tags.escape],
  color: "var(--ds-text-accent-teal, #206A83)"
}, {
  tag: tags.definition(tags.variableName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: tags.local(tags.variableName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: [tags.typeName, tags.namespace],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: tags.className,
  color: "var(--ds-text-accent-purple, #803FA5)"
}, {
  tag: [tags.special(tags.variableName), tags.macroName],
  color: "var(--ds-text, #292A2E)"
}, {
  tag: tags.definition(tags.propertyName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: tags.comment,
  color: "var(--ds-text-subtlest, #6B6E76)",
  fontStyle: 'italic'
}, {
  tag: tags.invalid,
  color: "var(--ds-text, #292A2E)"
}]);

/**
 * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
 * Occasionally we may want to override tokens for certain languages to
 * get closer to renderer.
 *
 * Note the way that codemirror works - these styles get added on top of the styling above
 * (and override existing tags).
 *
 * @param language Codemirror language to scope the changes to a specific language
 * @returns Highlight style which can be used with the syntax highlighting extension
 */
export const languageStyling = language => {
  switch (language.name) {
    case 'yaml':
      return HighlightStyle.define([{
        tag: tags.definition(tags.propertyName),
        color: "var(--ds-text-accent-green, #216E4E)",
        fontWeight: "var(--ds-font-weight-bold, 653)"
      }], {
        scope: language
      });
  }
};