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

Sass Themes: Fix Operators Colouring #134

Open
13 tasks
tajmone opened this issue Dec 5, 2021 · 1 comment
Open
13 tasks

Sass Themes: Fix Operators Colouring #134

tajmone opened this issue Dec 5, 2021 · 1 comment
Assignees
Labels
👑 HTML Format Issues with conversion to HTML format 🔨 highlight.js Tool: highlight.js (syntax highlighter) 🔨 Highlight Tool: Highlight (syntax highlighter) 🔨 Rouge Tool: Rouge syntax highlighter (Ruby) 🔨 Sass Tool: Dart Sass 💀 bug Something isn't working

Comments

@tajmone
Copy link
Collaborator

tajmone commented Dec 5, 2021

If you look at ALAN Manual » Creating Classes and Instances, you can see that the code template examples don't look good:

The <instance identifier> IsA <class identifier> ...

The < and > are render in a very light Cyan colour that strides with the light background. I need to check and fix all the CSS themes (default and others) to ensure they are rendered properly.

  • Add test coverage in _dev/styles-tests/ to check and fix how operators are coloured in Sass themes:
    • Highlight:
      • Default.
      • Library theme.
      • Example theme.
    • highlight.js:
      • Default.
      • Library theme.
      • Example theme.
    • Rouge:
      • Default.
      • Library theme.
      • Example theme.
@tajmone tajmone added 💀 bug Something isn't working 👑 HTML Format Issues with conversion to HTML format 🔨 Highlight Tool: Highlight (syntax highlighter) 🔨 highlight.js Tool: highlight.js (syntax highlighter) 🔨 Rouge Tool: Rouge syntax highlighter (Ruby) 🔨 Sass Tool: Dart Sass labels Dec 5, 2021
@tajmone tajmone self-assigned this Dec 5, 2021
@tajmone
Copy link
Collaborator Author

tajmone commented Dec 5, 2021

Nested CSS!

It looks like the problem is due to added italic, which causes the Rouge CSS Theme classes to end up nested in a <em> tag:

<em><span class="o">&lt;</span><span class="n">instance</span>

This might be easy to fix in the Sass sources by adding an * before the span classes, to ensure they match any level of nesting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👑 HTML Format Issues with conversion to HTML format 🔨 highlight.js Tool: highlight.js (syntax highlighter) 🔨 Highlight Tool: Highlight (syntax highlighter) 🔨 Rouge Tool: Rouge syntax highlighter (Ruby) 🔨 Sass Tool: Dart Sass 💀 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant