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

<!--[ 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 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

---