PrismJS custom component

pre.tsx

 
 ​import​ ​type​ ​{​ ​FC​,​ ​HTMLAttributes​,​ ​ReactElement​ ​}​ ​from​ ​'react'​; 
 ​import​ ​{​ ​Children​ ​}​ ​from​ ​'react'​; 
 ​import​ ​invariant​ ​from​ ​'tiny-invariant'​; 
 ​import​ ​Highlight​,​ ​{​ ​Language​,​ ​defaultProps​ ​}​ ​from​ ​'prism-react-renderer'​; 
 ​import​ ​CopyClipboardButton​ ​from​ ​'../button/copyClipboardButton'​; 
  
 ​function​ ​getLanguageFromClassName​(​className​: ​string​)​ ​{ 
 ​  ​const​ ​match​ ​=​ ​className​.​match​(​/​language-​(​\w​+​)​/​)​; 
 ​  ​return​ ​match​ ? ​match​[​1​]​ : ​''​; 
 ​} 
  
 ​function​ ​isLanguageSupported​(​lang​: ​string​)​: ​lang​ is ​Language​ ​{ 
 ​  ​return​ ​( 
 ​    ​lang​ ​===​ ​'markup'​ ​|| 
 ​    ​lang​ ​===​ ​'bash'​ ​|| 
 ​    ​lang​ ​===​ ​'clike'​ ​|| 
 ​    ​lang​ ​===​ ​'c'​ ​|| 
 ​    ​lang​ ​===​ ​'cpp'​ ​|| 
 ​    ​lang​ ​===​ ​'css'​ ​|| 
 ​    ​lang​ ​===​ ​'javascript'​ ​|| 
 ​    ​lang​ ​===​ ​'jsx'​ ​|| 
 ​    ​lang​ ​===​ ​'coffeescript'​ ​|| 
 ​    ​lang​ ​===​ ​'actionscript'​ ​|| 
 ​    ​lang​ ​===​ ​'css-extr'​ ​|| 
 ​    ​lang​ ​===​ ​'diff'​ ​|| 
 ​    ​lang​ ​===​ ​'git'​ ​|| 
 ​    ​lang​ ​===​ ​'go'​ ​|| 
 ​    ​lang​ ​===​ ​'graphql'​ ​|| 
 ​    ​lang​ ​===​ ​'handlebars'​ ​|| 
 ​    ​lang​ ​===​ ​'json'​ ​|| 
 ​    ​lang​ ​===​ ​'less'​ ​|| 
 ​    ​lang​ ​===​ ​'makefile'​ ​|| 
 ​    ​lang​ ​===​ ​'markdown'​ ​|| 
 ​    ​lang​ ​===​ ​'objectivec'​ ​|| 
 ​    ​lang​ ​===​ ​'ocaml'​ ​|| 
 ​    ​lang​ ​===​ ​'python'​ ​|| 
 ​    ​lang​ ​===​ ​'reason'​ ​|| 
 ​    ​lang​ ​===​ ​'sass'​ ​|| 
 ​    ​lang​ ​===​ ​'scss'​ ​|| 
 ​    ​lang​ ​===​ ​'sql'​ ​|| 
 ​    ​lang​ ​===​ ​'stylus'​ ​|| 
 ​    ​lang​ ​===​ ​'tsx'​ ​|| 
 ​    ​lang​ ​===​ ​'typescript'​ ​|| 
 ​    ​lang​ ​===​ ​'wasm'​ ​|| 
 ​    ​lang​ ​===​ ​'yaml' 
 ​  ​)​; 
 ​} 
  
 ​const​ ​CodeBlock​: ​FC​<​HTMLAttributes​<​HTMLPreElement​>​>​ ​=​ ​(​{​ children ​}​)​ ​=>​ ​{ 
 ​  ​invariant​(​!​!​children​,​ ​'children is required'​)​; 
 ​  ​const​ ​childrenArray​ ​=​ ​Children​.​toArray​(​children​)​; 
 ​  ​const​ ​codeElement​ ​=​ ​childrenArray​[​0​]​ ​as​ ​ReactElement​; 
 ​  ​const​ ​className​ ​=​ ​codeElement​?.​props​?.​className​ ​||​ ​''​; 
 ​  ​const​ ​lang​ ​=​ ​getLanguageFromClassName​(​className​)​; 
 ​  ​invariant​(​isLanguageSupported​(​lang​)​,​ ​'lang is required'​)​; 
 ​  ​const​ ​code​ ​=​ ​codeElement​.​props​.​children​[​0​]​ ​||​ ​''​; 
 ​  ​const​ ​identifier​ ​=​ ​code​; 
 ​  ​return​ ​( 
 ​    ​<​div​ ​className​=​"w-full my-5"​> 
 ​      ​<​Highlight​ ​{​...​defaultProps​}​ ​code​=​{​code​.​trim​(​)​}​ ​language​=​{​lang​ ​||​ ​'bash'​}​> 
 ​        ​{​(​{​ className​,​ tokens​,​ getLineProps​,​ getTokenProps ​}​)​ ​=>​ ​( 
 ​          ​<​div​ ​className​=​"p-4 rounded-md font-normal text-sm md:text-base bg-docs w-full"​> 
 ​            ​<​div​ ​className​=​"flex justify-end px-4 pb-2 text-particular-dark"​> 
 ​              ​<​span​ ​className​=​"mr-5 text-particular-light"​>​{​lang​ ​||​ ​'text'​}​<​/​span​> 
 ​              ​<​CopyClipboardButton​ ​title​=​"Copy code"​ ​content​=​{​code​}​ ​id​=​{​identifier​}​ ​/​> 
 ​            ​<​/​div​> 
 ​            ​<​pre​ ​className​=​{​`pb-2 overflow-scroll ​${​className​}​`​}​ ​style​=​{​{​}​}​> 
 ​              ​<​code​ ​className​=​{​className​}​ ​style​=​{​{​}​}​> 
 ​                ​{​tokens​.​map​(​(​line​,​ ​i​)​ ​=>​ ​( 
 ​                  ​<​div​ ​key​=​{​i​}​ ​{​...​getLineProps​(​{​ line​,​ ​key​: ​i​ ​}​)​}​ ​style​=​{​{​}​}​> 
 ​                    ​{​line​.​map​(​(​token​,​ ​key​)​ ​=>​ ​( 
 ​                      ​<​span​ ​key​=​{​key​}​ ​{​...​getTokenProps​(​{​ token​,​ key ​}​)​}​ ​style​=​{​{​}​}​ ​/​> 
 ​                    ​)​)​} 
 ​                  ​<​/​div​> 
 ​                ​)​)​} 
 ​              ​<​/​code​> 
 ​            ​<​/​pre​> 
 ​          ​<​/​div​> 
 ​        ​)​} 
 ​      ​<​/​Highlight​> 
 ​    ​<​/​div​> 
 ​  ​)​; 
 ​}​; 
 

End result looks like this: https://particular.cloud/documentation/developers/v1/javascript#installation

Be aware that the example code uses custom tailwind classes. You will need to update the background and text color classes.

To style the code, pick a prismJS theme: https://github.com/PrismJS/prism-themes/tree/master/themes

@andrelandgraf, I really appreciate you sharing this. Thank you 👍🏼