• Home
  • SEM
    • PPC
    • SEO
    • How To
  • Bangladesh
  • School
    • HTTP
    • REP
    • Bots n’ htaccess
    • Source Code
    • Excel 2010
    • HTML XHTML Entities
    • Gmail Operators
    • HTML & ASCII
  • About
    • Privy
    • About This Blog
  • Contact
  • বাংলা

Saidul Hassan

Digital Marketing Evangelist

Home / Bangladesh / How to use PrismJS syntax highlighter on WordPress without plugin

How to use PrismJS syntax highlighter on WordPress without plugin

30 Mar, 2020 By Saidul Hassan · Filed Under: Bangladesh

Configure and download PrismJS

No plugin required! Download prism.js and prism.cssfrom https://prismjs.com/download.html. Select Compression level, Theme of your choice, then Languages. You can also select Plugins if you want.

PrismJS download options

Once you’re satisfied with the configurations, click on the Download JS and Download CSS buttons to download your PrismJS syntax highlighter javascript and css files as prism.js and prism.css.

Download prism.js and prism.css files

Copy PrismJS files to WP Theme folder

Upload prism.js and prism.css to wp-content/themes/[theme-name]

Edit your theme functions.php

You should use child theme already. If you are not, then I hope you know what you are doing. Add the following code to your theme’s function.php file:

function add_prism()
{
    wp_enqueue_style( 'prism-css',  get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-js',  get_stylesheet_directory_uri() . '/prism.js', [], false, true );
}
add_action( 'wp_enqueue_scripts', 'add_prism' );

Bonus: line break for the code block

As mentioned on PrismJS github issues and on StackOverflow, PrismJS doesn’t enable line break by default. So you might find your codes in long lines with horizontal scroll bars. To enable line wrapping in your code blocks you need to set white-space: pre-wrap in the CSS.

white-space: pre-wrap

How to Use?

In the Gutenberg Block editor, select Add block, in the search for a block bar type /code and you will find the Code Block. Paste your code. In the Block Setting Advanced field, type appropriate language class. For example, language-css for CSS, language-python for Python.

For the HTML block, use <pre class="language-XXX"><code> you code...</code> </pre>
.

Link to this post!
The following two tabs change content below.
  • Bio
  • Latest Posts
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Saidul Hassan

Managing Partner at Up Arrow Consulting
COO at Up Arrow Consulting, MCC manager, & Technical SEO consultant. Certified Google Partners and Microsoft Bing Ads Accredited Professional, Python enthusiast, wannabe SysAdmin. Graduated from School of Management & Business Administration (SOMBA), Khulna University.
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Latest posts by Saidul Hassan (see all)

  • Batch script to create directories & moving fixed number of files to those directories - 30 Apr, 2021
  • How to use PrismJS syntax highlighter on WordPress without plugin - 30 Mar, 2020
  • Download an Entire Website for Offline Viewing - 26 Nov, 2019

Share:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Email
  • Print

First published on 30 Mar, 2020 · Last updated 30 Mar, 2020 · Tagged With: prismjs, syntax highlighter

Batch script to create directories & moving fixed number of files to those directories

30 Apr, 2021 By Saidul Hassan

How to use PrismJS syntax highlighter on WordPress without plugin

30 Mar, 2020 By Saidul Hassan

Download an Entire Website for Offline Viewing

26 Nov, 2019 By Saidul Hassan

How to color highlight .htaccess files in Xed/Gedit

20 Aug, 2018 By Saidul Hassan

HMA Pro VPN Setup for Multiple Locations without User/Password Every time in Linux CLI

14 May, 2018 By Saidul Hassan

  • ♥ Bangladesh ♥
    Log in · Privacy Policy · Contact
    Copyright © 2011 Saidul Hassan

  • DMCA

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.