How to add line-highlight for jsx code block?

[hopezh]

Description

It seems the line-highlight extension is not working for jsx code block, as shown below.

May I ask if there's a work-around, or an alternative extension for code line highlighting?

Thanks.

[mcanouil]

Syntax highlighting is provided by Skylighting (via Pandoc), see https://github.com/jgm/skylighting

The availability depends on the syntax existing in KDE, various upstream updates, and Quarto.

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

For accessibility, prefer sharing code as text rather than screenshot which make it unusable by everyone.

[cderv]

See my below answer. AFAIK This is not related to skylighting nor pandoc.

Using jsx as class for a code cell works well in pandoc and in quarto to get highlighting.

[cderv]

First, you did not specify it, but I do believe you are referring to this community-contributed extension, right ? https://github.com/shafayetShafee/line-highlight

This would have been helpful to mention it, as you are asking in Quarto repo and not in the extension own repo. This would have been the place to ask for help.

Anyhow, here in the screenshot you shared, you are using

• Non computation code cell (i.e Code Block with a class ```{.jsx})
• but you are also using in-cell comment syntax to pass option to computation cell. (i.e #| source-line-numbers: 1-3)

Those two don't work together, and this is why the option is not taken into account.

Please do read their documentation on how to use on fenced code block: https://github.com/shafayetShafee/line-highlight/tree/main?tab=readme-ov-file#highlighting-on-markdown-formatted-codeblocks

Highlighting will also works on syntactically formatted markdown code blocks (non-executable)(e.g. {.r}, {.python}, {.julia} etc)

Use source-line-numbers as code-block attributes (i.e. =),

Here is an example

---
title: My title
format: html
filters:
  - line-highlight
---

```{.jsx filename="index.jsx" source-line-numbers="1-3"}
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
```

Hope it helps.

For next time, please to try to take time giving full information and helpful details to help us help you.

Thanks !

[hopezh]

Thank you very much, @cderv and @mcanouil.

Apology for not providing the context info of my question properly.

I've updated the code as advised, and it works. I know now that source-line-number should be added as part of the code block header if the code is non-computational (not to be executed).

Here's the page on my quarto notebook, for which the qmd code can be shown: React Intro, if it helps other people with the same question.

[mcanouil]

@hopezh Please, as stated before, prefer sharing actual code rather than screenshot, especially if you don't intend to make your screenshots accessible.
Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.