Home

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

Post a Comment