C++ code highlighting issue

[yanyanlongxia]

Description

Thanks very much for your app. But it doesn't seem to show the code highlighting for the C++ language.

CPP and C options are enabled in NotionPage.tsx.

The result: https://yylx.tech/c-test-page The notion page: https://yylx.notion.site/C-test-page-cf556e69d9a94a38a1c847cf3241f86f

Notion Test Page ID

cf556e69d9a94a38a1c847cf3241f86f

[aghosh0605]

Description

Thanks very much for your app. But it doesn't seem to show the code highlighting for the C++ language.

CPP and C options are enabled in NotionPage.tsx.

The result: https://yylx.tech/c-test-page The notion page: https://yylx.notion.site/C-test-page-cf556e69d9a94a38a1c847cf3241f86f

Notion Test Page ID

cf556e69d9a94a38a1c847cf3241f86f

It same happens for me

[amogh-w]

I have managed to find a temporary solution.

Open components\NotionPage.tsx and go the bottom of the file, you will find NotionRenderer component.

      <NotionRenderer
        ...
        recordMap={recordMap}
        ...
      />

If you explore the recordMap variable, you can find the blocks returned by Notion API. Now if we select the language as C++ in our Notion Editor, we find the key value pair returned as recordMap.block[key].value.properties.language[0][0] = "C++". With PrismJS highlighter, we have to change this to recordMap.block[key].value.properties.language[0][0] = "Cpp". That's it.

Then you will be able to get your C++ code with syntax highlighting.

Here's some code to copy paste

Before ```js const socialDescription = getPageProperty('Description', block, recordMap) || config.description return ( <> {isLiteMode && } {isDarkMode && } ) } ``` After ```js const socialDescription = getPageProperty('Description', block, recordMap) || config.description try { Object.keys(recordMap.block).forEach((key) => { if (recordMap.block[key].value.properties.language[0][0] === 'C++') { recordMap.block[key].value.properties.language[0][0] = 'Cpp' } }) } catch (error) {} return ( <> {isLiteMode && } {isDarkMode && } ) } ```

This issue was mentioned here too - https://github.com/NotionX/react-notion-x/issues/220

[transitive-bullshit]

Thanks @amogh-w.

This should be pretty easy to fix in react-notion-x. We just need to check if https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/third-party/code.tsx#L31 is 'c++' and replace it with 'cpp'.

[aghosh0605]

Nice fix @amogh-w

[MartinXPN]

Another solution is to load the primsjs dependencies manually when needed and convert the notion language ids to prismjs language ids. An example implementation can be found here: https://github.com/MartinXPN/profound.academy/blob/main/src/common/notion/prismutil.ts

[zhufengning]

To avoid TypeError: recordMap.block[key].value.properties.language is undefined, add a try catch into the forEach block.

  try {
    Object.keys(recordMap.block).forEach((key) => {
      try {
        if (recordMap.block[key].value.properties.language[0][0] === 'C++') {
          recordMap.block[key].value.properties.language[0][0] = 'Cpp'
        }
        else if (recordMap.block[key].value.properties.language[0][0] === 'F#') {
          recordMap.block[key].value.properties.language[0][0] = 'Fsharp'
        }
      console.log(recordMap.block[key].value)
      } catch (_){}
    })
  } catch (_) {}

[powersagitar]

@transitive-bullshit is the patch merged into main branch? The issue still persists and I can't find anything like

if (language === 'c++') language = 'cpp'

in code.tsx.

According to your comment I suppose

  const language = (() => {
    const language = (
      block.properties?.language?.[0]?.[0] || defaultLanguage
    ).toLowerCase()

    switch (language) {
      case 'c++':
        return 'cpp'
      case 'f#':
        return 'fsharp'
      default:
        return language
    }
  })()

will fix and #605 seems like a bandaid patch. I opened https://github.com/NotionX/react-notion-x/pull/546 to re-introduce the patch for addressing this issue.