Code, Speed, Web, Without Plugin, Wordpress
Without plugins！How to use syntax highlighting Prism.js.｜WordPress
In this article, we will show you how to implement syntax highlighting in WordPress without using a plugin.
Syntax highlighting is often used to display source code on websites and blog sites.
This website has adopted “Prism.js” after various trials.
The reasons are as follows.
- Light.
- Many languages handled.
- Flexible.(Various customisations are possible.)
- Easy to implement.
- Not time consuming to implement.
There are ways to reduce server load with CDNs, but for the sake of customisability, we will explain the download section in this article.
Download prism.js.
Go to the download page.
The following is the official download website.
https://prismjs.com/ After opening the site, press the DOWNLOAD button to proceed to the download page.
Choice of compressed or uncompressed files.
Select compressed or uncompressed files.
If you don’t plan to touch the code in particular, choose a compressed file as it is lighter.
Select a theme (syntax highlighting appearance).
Select the theme (syntax highlighting appearance).
There are seven types – Default, Dark, Funky, Okaidia, Twilight, Coy and Solarized Light – and you can see what the display actually looks like by pressing the circle button on the right-hand side of the screen and looking at the bottom of the page.
This website uses “Okaidia” because of its good visibility.
Select the language you want to use.
Select the language you want to display in syntax highlighting.
The more selections you make, the larger and heavier the file size becomes, so it is a good idea to focus your selection on the ones you are likely to use.
The ‘Markup’ selected from the start is for HTML.
Plug-in selection.
Select a plugin that adds functionality to syntax highlighting.
Each link has its own instructions, so check the functions you need.
‘Line Numbers’ is a plugin for adding line numbers and is one of the recommended features.
Downloading files.
Once you have checked the capacity of your customised data and the appearance of the syntax highlighting, download the data.
Javascript and css downloads are required for each.
Installation of prism.js
Installation of files.
Upload the downloaded js and css files to the directory of the theme you are using.
Then load these js and css to use prism.js.
If you want it to be read on every page.
Add a description to be loaded in the head tag.
For examples, see below.
※The path should be changed to the respective installation.
/* Read all pages. */
<head>
<script src="https://frecer.com/wp-content/themes/frecer/prism.js"></script>
<link rel="stylesheet" href="https://frecer.com/wp-content/themes/frecer/prism.css">
</head>
If you only want it to be read on specific category pages.
Loading all pages slows down page display speed due to rendering and other effects.
To prevent them, if you want to use a conditional branch to load only a specific category, you can describe it as follows.
Describe this in the functions.php file of the theme used.
※The path should be changed to the respective installation.
/* Specific category pages.（E.g. Category ID: 1,2,3）limited read. */
function meta_headcustomtags() {
if( in_category( array( 1,2,3 ) ) ) {
$headcustomtag = <<<EOM
<script src="https://frecer.com/wp-content/themes/frecer/prism.js"></script>
<link rel="stylesheet" href="https://frecer.com/wp-content/themes/frecer/prism.css">
EOM;
echo $headcustomtag;
}
}
add_action( 'wp_head', 'meta_headcustomtags', 99);
How to use prism.js.
How to display the code.
Enclose the code you want to display in pre and code tags.
The code tag must specify class=”language-the name of the language to be used”.
<pre>
<code class="language-Language Name">
Source code to be displayed.
</code>
</pre>
To display the HTML source, specify class=”language-markup” in the code tag.
Note that in the case of HTML, unlike other types of HTML, it is markup, not as is.
<pre>
<code class="language-markup">
Source code to be displayed.
</code>
</pre>
To display the css source, specify class=”language-css” in the code tag.The following example shows how to do this.
<pre>
<code class="language-css">
h1 { font-size:30px; }
</code>
</pre>
How to display line numbers.
Select ‘line-numbers’ in Plugins.
Line numbers are displayed by specifying class=”line-numbers” in the pre tag.
<pre class="line-numbers">
<code class="language-Language Name">
Sources you want to display.
</code>
</pre>
Notes to the code description.
The code is not displayed as it is described in order to display it.
An entity reference transformation is required.
If you write tags as they are in html, they are recognised as tags, which means they need to be converted.
It means that 「<」 needs to be converted to 「<」 and 「>」 to 「>」.
Use the following website to convert the source code.
Summary.
In this article, the implementation of syntax highlighting (Prism.js) was explained without the use of a plugin.
Of the many, Prism.js is superior in terms of lightness, versatility and flexibility.
Furthermore, you can combine conditional branching and other features within WordPress to build a more comfortable environment.
Please refer to this if you like.
Thank you for visiting.
Sponsor
Frecer Sponsorship applications are now open!
We are pleased to announce that we are now accepting applications for Frecer sponsorship. Sponsor We offer a variety of plans and special offers. The funds you support will help to realise a number of projects. We sincerely look forward...
Continue readingSpeed Web Wordpress
How to optimise page speed in WordPress.WordPress
If a web page does not load within the first two seconds, 55% of mobile users will leave that web page. Furthermore, around 70% of consumers in online stores report that page display speed is linked to their willingness to...
Continue readingPlant
Agave victoriae-reginae ‘Sasanoyuki’
1. Basic Information.1.1. Scientific name1.2. Family name1.3. Genus name1.4. Species name1.5. Country of origin1.6. Habitat1.7. Morphology1.8. Mature tree1.9. Cold hardy1.10. Heat tolerant1.11. Sunshine1.12. Flour color1.13. Flowering period Basic Information. Scientific name Agave victoria-regina Family name Asparagaceae Genus name Agave Species...
Continue readingCDN Security Speed
DNS configuration with Cloudflare.Set up bombastic DNS for a more comfortable IT life.
DNS configuration with Cloudflare not only speeds up browser start-up, but also contributes to improved security. Please give it a try. 1. 1.1.1.12. 1.1.1.1 family oriented.2.1. Blocks malware.2.2. Blocks malware and adult content. 1.1.1.1 1.1.1.1 is Cloudflare’s public DNS resolver.It...
Continue readingCode Security Web Wordpress
How to prohibit access to wp-config.php.WordPress
Prohibiting access to wp-config.php improves site security. You are encouraged to refer to this information to maintain your website. Put the following code in the “.htaccess” file. <files wp-config.php> order allow,deny deny from all </files>
Continue readingHealth
How to live longer.
1. Don’t Cigarette.2. Moderate exercise.3. Nutritious and balanced diet.4. Maintaining a healthy weight.5. Good quality sleep.6. Avoid stress.7. Conclusion. Don’t Cigarette. There are several best ways to live longer, but if asked to choose just one, ‘don’t smoke’, say researchers....
Continue readingCode Speed Web Wordpress
How to score 100 on the Google Speed Test.How to create better web vitals with WordPress themes and plugins. ‘Checklist for developers’.
This post explains how to get a score of 100 on the google speed test. 1. 1.Files2. 2.Fonts and typography3. 3.CSS framework4. 4.Conditional asset loading4.1. Inline styles4.2. Inline scope4.3. Using transients to store conditions4.4. Checking by name for loading5. 5.Image...
Continue readingArrival Shop
WordPress PWA（Progressive Web App）Best Plugin！
The right PWA plugin for WordPress can benefit your site and your customers’ experience.This article therefore presents the best PWA plugins for WordPress. 1. 1.Best PWA Plugins For WordPress2. 2.Super Progressive Web Apps By SuperPWA3. 3.Progressive WordPress (PWA) By Nico...
Continue readingCode Web Without Plugin Wordpress
Without plugins！How to display a blog card with internal and external link support.｜WordPress
Learn how to display blog cards in WordPress without using a plugin. Plug-in non-use has various advantages, such as reducing server load and maintaining site display speed. WordPress has a large variety of plugins, but you want to customise it...
Continue readingNews NGO
Non-governmental organization established.「Frecer NGO」
Today, the non-governmental organisation “Frecer NGO” was established. The aim is to grow and advance humanity while working to solve problems across the globe, whether local, national or international. There are many problems and challenges, but we want to work...
Continue reading