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.

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

Separate Editor Theme from Syntax Highlighting #670

Closed
BrianHung opened this issue Jul 3, 2024 · 4 comments
Closed

Separate Editor Theme from Syntax Highlighting #670

BrianHung opened this issue Jul 3, 2024 · 4 comments

Comments

@BrianHung
Copy link

BrianHung commented Jul 3, 2024

I'm trying to reuse the github themes with the lezer/highlight API highlightTree. However, right now all the theme packages bundle the EditorView.theme together with the HighlightStyle.define so I can't use the styles independently.

As precedence, it is what https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts does.

Would love if for the github theme and possibly other themes as well if

export const githubLightStyles = [
    { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
    { tag: [t.comment, t.bracket], color: '#6a737d' },
    { tag: [t.className, t.propertyName], color: '#6f42c1' },
    { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
    { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
    { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
    { tag: [t.name, t.quote], color: '#22863a' },
    { tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' },
    { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
    { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
    { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
    { tag: t.link, textDecoration: 'underline' },
    { tag: t.strikethrough, textDecoration: 'line-through' },
    { tag: t.invalid, color: '#cb2431' },
  ]

export const githubLightInit = (options?: Partial<CreateThemeOptions>) => {
  const { theme = 'light', settings = {}, styles = [] } = options || {};
  return createTheme({
    theme: theme,
    settings: {
      ...defaultSettingsGithubLight,
      ...settings,
    },
    styles: [...githubLightStyles, ...styles]
  });
};
jaywcjlove added a commit that referenced this issue Jul 4, 2024
jaywcjlove added a commit that referenced this issue Jul 4, 2024
github-actions bot pushed a commit that referenced this issue Jul 4, 2024
@jaywcjlove
Copy link
Member

@BrianHung Upgrade v4.23.0

@BrianHung
Copy link
Author

Thanks for the fast PR! 😊

@aiktb
Copy link

aiktb commented Oct 21, 2024

Sorry to bother you. Could you share some code on how to reuse @uiw/codemirror-theme-github in @lezer/highlight? I'm stuck.
Thank you!

@BrianHung
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants