Skip to content
Styling Code Blocks in WordPress

Styling Code Blocks in WordPress

Code Blocks are an important part of any programming blog and highlighting them will add more colors and fun. Syntax highlighted blocks of code looks pretty and are easier to read. In this post I’ll explain how I did it and you can too.

Adding Prism.js to your Blog

  1. Visit prismjs.com
  2. Download the JavaScript and CSS files
  3. Add the prsim.CSS to our site’s <head>
  4. Include the prism.js in the body
  5. 🥳🥳🥳

Adding Prism.js code blocks to WordPress

Follow the above steps and upload the JavaScript and CSS files to your current theme folder. Now add the below code to our code snippets or Functions.php. The code below adds prism only to blog posts, not to the home page or any other pages. You can remove that ‘if’ condition if you want to.

function add_prism() {
    if (is_single()) {
        wp_register_style(
            'prismCSS', // handle name for the style
            get_stylesheet_directory_uri() . '/prism.css'
            // location of the prism.css file
        );
        wp_register_script(
            'prismJS', // handle name for the script
            get_stylesheet_directory_uri() . '/prism.js'
            // location of the prism.js file
        );
        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
}
add_action('wp_enqueue_scripts', 'add_prism');

Adding some style

Add some style to the code blocks like this one below,
prism code block styling

For WordPress

.wp-block-code::before{
content:"🔴🟡🟢";
display:block;
margin-bottom:0.4rem;}

Other Websites

pre::before{
content:"🔴🟡🟢";
display:block;
margin-bottom:0.4rem;}

Replace the <pre> accordingly.

My Custom Prism Theme

At matrixread we use the modified version of the okaidia theme,

/**
 Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 @author ericwbailey
 */
 pre{
 font-size:17px;}
 code[class="language-"], pre[class="language-"] {
  color: #f8f8f2;
  background: #001628;;
  font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
 -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
 -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
 }
 /* Code blocks / pre[class="language-"] {
  padding: 1em;
  margin: 0.5em auto;
  overflow: auto;
  border-radius: 0.3em;
 }
 :not(pre) > code[class="language-"], pre[class="language-"] {
  background: #001628;
 }
 /* Inline code / :not(pre) > code[class="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
 }
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
  color: #d4d0ab;
 }
 .token.punctuation {
  color: #fefefe;
 }
 .token.property,
 .token.tag,
 .token.constant,
 .token.symbol,
 .token.deleted {
  color: #ffa07a;
 }
 .token.boolean,
 .token.number {
  color: #00e0e0;
 }
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
  color: #abe338;
 }
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string,
 .token.variable {
  color: #00e0e0;
 }
 .token.atrule,
 .token.attr-value,
 .token.function {
  color: #ffd700;
 }
 .token.keyword {
  color: #00e0e0;
 }
 .token.regex,
 .token.important {
  color: #ffd700;
 }
 .token.important,
 .token.bold {
  font-weight: bold;
 }
 .token.italic {
  font-style: italic;
 }
 .token.entity {
  cursor: help;
 }
 @media screen and (-ms-high-contrast: active) {
  code[class="language-"],  pre[class="language-"] {
      color: windowText;
      background: window;
  }
 :not(pre) > code[class="language-"],  pre[class="language-"] {
      background: window;
  }
 .token.important {
      background: highlight;
      color: window;
      font-weight: normal;
  }
 .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
      font-weight: bold;
  }
 .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
      color: highlight;
  }
 .token.attr-value,
  .token.url {
      font-weight: normal;
  }
 } 
 pre.line-numbers {
     position: relative;
     padding-left: 3.8em;
     counter-reset: linenumber;
 }
 pre.line-numbers > code {
     position: relative;
 }
 .line-numbers .line-numbers-rows {
     position: absolute;
     pointer-events: none;
     top: 0;
     font-size: 100%;
     left: -3.8em;
     width: 3em; /* works for line-numbers below 1000 lines */
     letter-spacing: -1px;
     border-right: 0;
 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
 }
 .line-numbers-rows > span {
     pointer-events: none;
     display: block;
     counter-increment: linenumber;
 }
 .line-numbers-rows > span:before {
     content: counter(linenumber);
     color: #5C6370;
     display: block;
     padding-right: 0.8em;
     text-align: right;
 }
 .prism-titlename {
     margin: -14px -12px 24px -12px;
     padding: 4px 16px;
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
     font-weight: bold;
     color: orange;
     background-color: #444;
 }
Tags: