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

Jump to bottom

Syntax highlighting has very limited support #446

Closed
noraj opened this issue Nov 20, 2022 · 7 comments
Closed

Syntax highlighting has very limited support #446

noraj opened this issue Nov 20, 2022 · 7 comments
Assignees
@geoffreymcgill
Labels
enhancement New feature or request
Milestone
v3.0

Comments

@noraj
Copy link
Contributor

noraj commented Nov 20, 2022

The library use as syntax highlighter is not documented in retype (see #445) so I don't know what are supported languages but I can already say it seems the library used is quite poor, I doesn't know the very famous ERB templating language that is included in any major syntax highlighter :

Is that because all modules/languages are not loaded by default in Retype? Or because the library used has very limited languages support? If option 1 could you enable all modules, if option 2 is that possible to change of library?
@noraj noraj mentioned this issue Nov 20, 2022
Closed
@geoffreymcgill geoffreymcgill self-assigned this Nov 21, 2022
@geoffreymcgill
Copy link
Collaborator

Retype uses PrismJS for syntax highlighting.

It appears ERB is not well supported by Prism. I ran a test using their playground and there was basically no syntax highlighting, see:

https://prismjs.com/test.html#language=ruby

Depending on your code sample, switching to ruby does highlight the syntax, although I'm unsure if that creates the expected syntax highlighting result for ERB code.

Interestingly, VS Code does not appear to syntax highlight erb blocks within .md files either (at least for me). Again, switching to ruby does highlight.

With Retype, all PrismJS language modules are dynamically loaded as required. All Prism supported languages are supported by Retype.

@noraj
Copy link
Contributor Author

noraj commented Nov 21, 2022

It appears ERB is not well supported by Prism. I ran a test using their playground and there was basically no syntax highlighting, see:

https://prismjs.com/test.html#language=ruby

I don't agree, it works well, see at https://prismjs.com/test.html#language=erb:

With the follwoing template:

  <html>
    <head><title>Ruby Toys -- <%= @name %></title></head>
    <body>

      <h1><%= @name %> (<%= @code %>)</h1>
      <p><%= @desc %></p>

      <ul>
        <% @features.each do |f| %>
          <li><b><%= f %></b></li>
        <% end %>
      </ul>

      <p>
        <% if @cost < 10 %>
          <b>Only <%= @cost %>!!!</b>
        <% else %>
           Call for a price, today!
        <% end %>
      </p>

    </body>
  </html>

image

Depending on your code sample, switching to ruby does highlight the syntax, although I'm unsure if that creates the expected syntax highlighting result for ERB code.

No, ERB highlight both HTML and Ruby while Ruby highlight only Ruby.

Interestingly, VS Code does not appear to syntax highlight erb blocks within .md files either (at least for me). Again, switching to ruby does highlight.

Yeah, VSCode highlight a very limited amount of languages, that's why there are tons of XYZ language and syntax highlight plugins for VSCode.

With Retype, all PrismJS language modules are dynamically loaded as required. All Prism supported languages are supported by Retype.

On Prism.js website I can highlight the chunk of code I wanted with ERB:

image

While on Retype it doesn't highlight anything.

image

The example is live here and you can check the source code here.

@noraj
Copy link
Contributor Author

noraj commented Nov 21, 2022

In #445 you said

All PrismJS language modules are dynamically loaded as required

So that must be it, Retype fails to load the ERB module (and maybe others) even if a code block is using the required language.

@geoffreymcgill
Copy link
Collaborator

We'll have to investigate. Could be the theme does not support those tokens. In the next Retype release, all the libraries are getting updated to their latest releases as well, so that might help.

@ronald8192 ronald8192 mentioned this issue Dec 1, 2022
Closed
@geoffreymcgill
Copy link
Collaborator

geoffreymcgill commented Mar 25, 2023 •
edited
Loading

We have updated the Prism lang libraries and themes, and erb syntax highlighting is much better supported now, although maybe still not 100% ideal. The custom Prism prism-vsc-dark-plus theme we use within Retype does not perfectly support erb but it certainly gets us closer.

Screen Shot 2023-03-25 at 3 53 48 PM

We are testing with the following code sample:

  <html>
    <head><title>Ruby Toys -- <%= @name %></title></head>
    <body>

      <h1><%= @name %> (<%= @code %>)</h1>
      <p><%= @desc %></p>

      <ul>
        <% @features.each do |f| %>
          <li><b><%= f %></b></li>
        <% end %>
      </ul>

      <p>
        <% if @cost < 10 %>
          <b>Only <%= @cost %>!!!</b>
        <% else %>
           Call for a price, today!
        <% end %>
      </p>

    </body>
  </html>

We have some more work to do on the Prism themes, so we might be able to hammer out the remaining erb syntax highlighting issues during that work.

For now, I'm going to close this issue. The improved erb syntax highlighting support will be available in the upcoming Retype v3.0 release.

Hope this helps.

@geoffreymcgill geoffreymcgill added the enhancement New feature or request label Mar 25, 2023
@geoffreymcgill geoffreymcgill added this to the v3.0 milestone Mar 25, 2023
@geoffreymcgill
Copy link
Collaborator

We found a defect in how the Prism themes were rendering and after fixing that issue, the erb rendering improved. At least the red font-color is gone now.

Latest rendering of the erb sample now looks like the following:

Screen Shot 2023-04-25 at 8 30 39 PM

The fix will be included in Retype v3.0.

@geoffreymcgill
Copy link
Collaborator

Retype v3.0 has been released and includes this fix.

https://retype.com/guides/getting-started/#update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geoffreymcgill geoffreymcgill

Labels
enhancement New feature or request
Projects
None yet
Milestone
v3.0
Development

No branches or pull requests
2 participants
@geoffreymcgill @noraj