Looking to create a custom code display box- similar to this image, to use for blogging purposes in CMS. Would like to style in this format using a different color for each language, and input custom code to display.
Anyone know how I can implement this?
Thanks!
You should use Syntax Highlighter like Prism.js
Also it is best to escape your code for best result, we can do it manually using this HTML Escape and HTML Unescape Online Tool. I think there is also JS for this but I haven’t looked it for now.
1 Like
By the way, you can use their CDN link, for you I’ve shared it below
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/components/prism-core.min.js" integrity="sha512-LCKPTo0gtJ74zCNMbWw04ltmujpzSR4oW+fgN+Y1YclhM5ZrHCZQAJE4quEodcI/G122sRhSGU2BsSRUZ2Gu3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-GP4x8UWxWyh4BMbyJGOGneiTbkrWEF5izsVJByzVLodP8CuJH/n936+yQDMJJrOPUHLgyPbLiGw2rXmdvGdXHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
1 Like
thank you much appreciated!
How about customizing the highlighted background color, for example I can use the ‘solarized light’ theme for this style, but if I want to add other highlight boxes (orange/purple/blue) how would I do this? and for the header tab ‘Python’ should I just add this in separately as another heading type?