Syntax Highlighter

I added in a syntax highlighter using Rainbow. I only added language support for Shell, SQL, HTML, CSS, PHP, & JavaScript because these are all that’s needed for WordPress. I am fairly persnickety about the color schemes I use in my text editors so I matched the sunburst theme in the colors.scss file.

Notes:

For whatever reason, WordPress has decided that it’s Gutenberg Code blocks need to use ‘white-space: pre-wrap;’ and I’ve overwritten that with ‘white-space:pre;’ so as to not wrap the code blocks.

Usage:

Instead of adding an addtional dropdown field in the block settings, you can simply add the language class in Block -> Advanced -> Additional CSS class(es) [ e.g. “language-javascript” ]

PHP:

/* Function to add admin JavaScript */
add_action( 'admin_enqueue_scripts', 'dwp23_admin_script' );
function dwp23_admin_script() {
  wp_register_script( 'admin-js', get_template_directory_uri().'/js/admin.js', array('jquery-core'), false, true );
  wp_enqueue_script( 'admin-js' );
  wp_register_script( 'scripts-js', get_template_directory_uri().'/js/_scripts.min.js', '', false, true );
  wp_enqueue_script( 'scripts-js' );
}

HTML:

  <div id="footer-widgets" class="mt-5">
    <div class="container mt-5 text-muted">
      <div class="row py-5">
        <div class="col-12 col-xl-3 col-lg-4 col-md-6">
          <?php if ( is_active_sidebar( 'footer-1' )) :  dynamic_sidebar( 'footer-1' ); endif; ?>
        </div>
        <div class="col-12 col-xl-3 col-lg-4 col-md-6">
          <?php if ( is_active_sidebar( 'footer-2' )) :  dynamic_sidebar( 'footer-2' ); endif; ?>
        </div>
        <div class="col-12 col-xl-3 col-lg-4 d-none d-lg-block">
          <?php if ( is_active_sidebar( 'footer-3' )) :  dynamic_sidebar( 'footer-3' ); endif; ?>
        </div>
        <div class="col-12 col-xl-3 d-none d-xl-block">
          <?php if ( is_active_sidebar( 'footer-4' )) :  dynamic_sidebar( 'footer-4' ); endif; ?>
        </div>
      </div>
    </div>
  </div>

Javascript:

/* Function to detect local color scheme mode */
function detectColorScheme(){
  var theme="light";
  if(localStorage.getItem("theme")){
    if(localStorage.getItem("theme") == "dark"){
      var theme = "dark";
    }
  } else if(!window.matchMedia) {
    return false;
  } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
    var theme = "dark";
  }
  if (theme=="dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}
detectColorScheme();

CSS:

.wp-block-code code {
  white-space:pre;
}
.rainbow {
  border-spacing: 0;
  border-collapse: collapse;
}
.rainbow .line:hover {
  background-color: #171b1c;
}
.rainbow .line:hover .line-number {
  background-color: #101313;
}
.rainbow .line .line-number {
  text-align: right;
  background-color: #1b2022;
  padding-left: 0.8em;
  padding-right: 0.8em;
}
.rainbow .line .line-number:before {
  content: attr(data-line-number);
}
.rainbow .line .line-code {
  padding-left: 1em;
  width: 100%;
}

SQL:

/* Some SQL statements to clean database */
ALTER TABLE ENGINE = InnoDB;
ALTER TABLE CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
DELETE FROM wp_comments WHERE comment_approved = 'spam';
UPDATE wp_posts SET ping_status = 'closed';
DELETE FROM wp_terms WHERE term_id IN (SELECT term_id FROM wp_term_taxonomy WHERE count = 0 );
DELETE FROM wp_term_taxonomy WHERE term_id not IN (SELECT term_id FROM wp_terms);
DELETE FROM wp_term_relationships WHERE term_taxonomy_id not IN (SELECT term_taxonomy_id FROM wp_term_taxonomy);
DELETE FROM wp_options WHERE option_name LIKE ('_transient%_feed_%');
DELETE a,b,c FROM wp_posts a WHERE a.post_type = 'revision' LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id) LEFT JOIN wp_postmeta c ON (a.ID = c.post_id);
DELETE FROM wp_usermeta WHERE NOT EXISTS ( SELECT * FROM wp_users WHERE wp_usermeta.user_id = wp_users.ID )
DELETE wp_postmeta FROM wp_postmeta LEFT JOIN hp_posts ON wp_posts.ID = wp_postmeta.post_id WHERE wp_posts.ID IS NULL;