Demo

Plus Ui Theme Code Box with Copy and Dark Mode Buttons

<!--[ Code Box 1 ]-->
<!--[ Code Box 2 ]-->
<!--[ Code Box 3 ]-->
link

Syntax Highlighter

  • Change data-text='.html' to define another code format, i.e. data-text='.css'data-text='.js'data-text='.php', etc
  • Value white-space:pre-wrap; useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible.
  • max-height:none; defines the maximum height of syntax isn't set (automatic), change the value of none to eg 400px to specify the maximum height of syntax is only 400 pixels.
  • Use <i class='red'>code_here</i> to add red/orage color.
  • Use <i class='blue'>code_here</i> to add blue color.
  • Use <i class='green'>code_here</i> to add green color.
  • Use <i class='gray'>code_here</i> to add gray color.
  • Use <i class='block'>code_here</i> to add a block of blue color.
link

Automatic Colored Syntax Highlighter

Sample Page

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>
Sample Page

Sample content here!

link

How to Create Stylish Codebox for Blog Posts

HTML
Your_codes_here
CSS
Your_codes_here
JS
Your_codes_here
link
Table of Contents

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.