TSX highlighting support

[puku0x]

🧩 Feature request

Description

markdownPlugin does not highlight some React / StencilJS components because highlight.js which is used in the plugin does not support .tsx files.

Example

```tsx
type Props = {
  value: number;
};

const SampleComponent: React.FC<Props> = (props) => (
  <p>{props.value}</p>
);

Describe the solution you'd like

I think Prism is a good alternative to solve this problem.

marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: (code, language) => {
        // const hljs = require('highlight.js');
        // const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
        // return hljs.highlight(validLanguage, code).value;

        const Prism = require("prismjs");
        const loadLanguages = require("prismjs/components/index");
        loadLanguages(language);
        const validLanguage = Prism.languages[language] ? language : 'textfile';
        return Prism.highlight(code, Prism.languages[validLanguage], validLanguage);
    },

Describe alternatives you've considered

• Treat .tsx as javascript or typescript
• Wait until highlight.js supports .tsx
  (typescript) Add JSX support to Typescript highlightjs/highlight.js#1155

[Splaktar]

If you use PrismJS as described in the docs, they have TSX support.

You just need to make sure to import the following in your HighlightService:

import 'prismjs/components/prism-tsx';

[puku0x]

@Splaktar
Oh. I didn’t know Scully has a document site. Thank you for the info.

The HighlightService looks good too, for now.

[puku0x]

Wow, the plugin now uses Prism. I'm looking forward to the next update.
https://github.com/scullyio/scully/blob/main/libs/scully/src/lib/fileHanderPlugins/markdown.ts

[puku0x]

I guess it's time to reopen this issue because Scully will be able to highlight JSX/TSX by adding following modules.

// libs/scully/src/lib/fileHanderPlugins/markdown.ts
require("prismjs/components/prism-jsx");
require("prismjs/components/prism-tsx");