Custom HTML from Notion.so Code Block

[emindeniz99]

Hello, I can not find where we set this html.

I want to add custom html component. indeed we can use notion’s code block as html provider. When a code block is includes html and specific caption like “RAW-HTML-RENDER” If it seems, render all code as html. It can be at react-notion-x repo. So, We can easily insert custom html to site with only notion.

this screenshot from notion

In my desire is that the code will be converted to html div with text and javascript will be executed at the browser.

https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/396aee01f534efcd357bd0cbd13fe2766bfbd9bb/lib/types.ts#L33

— What do you think?

[emindeniz99]

https://github.com/NotionX/react-notion-x/blob/9f6ba857cda13e9dbba846a1621fcd2d230ec078/packages/react-notion-x/src/block.tsx#L547

      if (block.properties.title) {
        const content = block.properties.title[0][0]
        const language = block.properties.language[0][0]

        // TODO: add className
        return (
          <components.code
            key={block.id}
            language={language || ''}
            code={content}
          />
        )
      }
      break
    }

At this point, we can put condition for language and caption Caption should exist in block data. if( caption===“raw-html...” and language===“html”) Return Else Return <component.code code=content lang=lang ... />

[transitive-bullshit]

One option would be to add site.html = "... whatever html ..." right around here in this file https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/components/NotionPage.tsx#L102

Any HTML string you put in there will get injected into your document at the footer.

the code component isn't really meant to inject actual HTML code, so I would advise against overriding the code component.

[SantoshSrinivas79]

@transitive-bullshit is there any way to add custom classes to blocks and reference them with custom css in site.html as mentioned above to get some more styling flexibility for notion blocks?

[transitive-bullshit]

@SantoshSrinivas79 all blocks have at least two classes, the type like notion-collection, and the specific block ID like notion-block-f917892e0b8c4dbeb1743620de57a0ec.

I've found this enough to customize 99% of use cases, but I'm open to suggestions for how to improve things. 😄

[SantoshSrinivas79]

@transitive-bullshit sounds good ... sorry .... I am just picking up on Notion. I'm just wondering if there is a way to easily add specific classes where I need some special styling. For eg: if I had to style only startups cards on your blog ...

BTW .. is your notion blog available to duplicate? :-D ... does nextjs-notion-starter-kit render it directly or did you make custom changes on it?

Many thanks! I am trying Notion only because of this project :-D

[transitive-bullshit]

@SantoshSrinivas79 ahhh this is something we need to add to the collection items in https://github.com/NotionX/react-notion-x

All blocks have class IDs attached to them, but we currently aren't attaching class IDs to collection items like in this gallery view.

[philffm]

In my portfolio website (where I simply use static pages created and manually exported from Notion with some custom JS - no React or nextjs involved back then) I approached it that way:

function replaceCode(){
    let elCode = document.querySelectorAll('code');
    if(elCode){
        for(i=0;i < elCode.length;i++){
            let code = elCode[i].innerText;
            let includeCode = code.includes('@include'); 
            let codeClean = code.replaceAll('@include','');
            if (includeCode){
                elCode[i].parentElement.outerHTML=codeClean;
            }else{}
        }
    }else{}
}

examples: https://cv.philwornath.com/project/koios/

Bit hacky - but maybe it helps :D

Greets, Phil

[emindeniz99]

@philffm thanks Phil I have used it at https://integral.events

HTML comment with a keyword that I set "RENDERHTML" changes react block type to dangeroushtml. this commit includes this https://github.com/emindeniz99/nextjs-notion-starter-kit/commit/f8f3c3a69f4078137f83a88f58eabf6eb457f507

Indeed, caption of code block can be used. "Registration widget" can be replaces with a custom keyword like "RENDERHTML" or "@include" etc. I looked at it, but notion-client at react-notion-x does not support this field yet.

          code: ({ code, language }: { code: string; language: string }) => {
            if (
              language === 'HTML' &&
              code
                .trimLeft()
                .startsWith(process.env.NEXT_PUBLIC_RENDER_RAW_HTML_TAG)
            ) {
              return (
                <InnerHTML
                  style={{ width: '100%' }}
                  html={code.replace(
                    process.env.NEXT_PUBLIC_RENDER_RAW_HTML_TAG,
                    ''
                  )}
                />
              )
            } else {
              return <Code code={code} language={language} />
            }
          },