C++ code highlighting issue

[yanyanlongxia]

trafficstars

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

[ghoshzsh]

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

  const socialDescription =
    getPageProperty<string>('Description', block, recordMap) ||
    config.description

  return (
    <>
      <PageHead
        pageId={pageId}
        site={site}
        title={title}
        description={socialDescription}
        image={socialImage}
        url={canonicalPageUrl}
      />

      {isLiteMode && <BodyClassName className='notion-lite' />}
      {isDarkMode && <BodyClassName className='dark-mode' />}

      <NotionRenderer
        bodyClassName={cs(
          styles.notion,
          pageId === site.rootNotionPageId && 'index-page'
        )}
        darkMode={isDarkMode}
        components={components}
        recordMap={recordMap}
        rootPageId={site.rootNotionPageId}
        rootDomain={site.domain}
        fullPage={!isLiteMode}
        previewImages={!!recordMap.preview_images}
        showCollectionViewDropdown={false}
        showTableOfContents={showTableOfContents}
        minTableOfContentsItems={minTableOfContentsItems}
        defaultPageIcon={config.defaultPageIcon}
        defaultPageCover={config.defaultPageCover}
        defaultPageCoverPosition={config.defaultPageCoverPosition}
        mapPageUrl={siteMapPageUrl}
        mapImageUrl={mapImageUrl}
        searchNotion={config.isSearchEnabled ? searchNotion : null}
        pageAside={pageAside}
        footer={footer}
      />

      <GitHubShareButton />
    </>
  )
}

After

  const socialDescription =
    getPageProperty<string>('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 (
    <>
      <PageHead
        pageId={pageId}
        site={site}
        title={title}
        description={socialDescription}
        image={socialImage}
        url={canonicalPageUrl}
      />

      {isLiteMode && <BodyClassName className='notion-lite' />}
      {isDarkMode && <BodyClassName className='dark-mode' />}

      <NotionRenderer
        bodyClassName={cs(
          styles.notion,
          pageId === site.rootNotionPageId && 'index-page'
        )}
        darkMode={isDarkMode}
        components={components}
        recordMap={recordMap}
        rootPageId={site.rootNotionPageId}
        rootDomain={site.domain}
        fullPage={!isLiteMode}
        previewImages={!!recordMap.preview_images}
        showCollectionViewDropdown={false}
        showTableOfContents={showTableOfContents}
        minTableOfContentsItems={minTableOfContentsItems}
        defaultPageIcon={config.defaultPageIcon}
        defaultPageCover={config.defaultPageCover}
        defaultPageCoverPosition={config.defaultPageCoverPosition}
        mapPageUrl={siteMapPageUrl}
        mapImageUrl={mapImageUrl}
        searchNotion={config.isSearchEnabled ? searchNotion : null}
        pageAside={pageAside}
        footer={footer}
      />

      <GitHubShareButton />
    </>
  )
}

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'.

[ghoshzsh]

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.