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.
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.
Plant
Copiapoa cinerea var. cinerea
Copiapoa cinerea is known as the ‘white cactus’ and is arguably the most popular cactus in Japan. Individuals with particularly white skin and pitch-black spines fetch high prices. 1. Synonym2. Origin3. Habitat4. Description5. Farming6. Way of increasing Synonym Below are...
Continue readingCode
How to unzip a zip file in the server.
Assume the file you want to unzip is ‘example.zip’. 1. 1：Upload the zip file you want to unzip.2. 2：Creating and uploading unzip.php.3. 2：Access unzip.php.4. 3：Deployment of zip.5. 4：Finish. 1：Upload the zip file you want to unzip. Upload the zip file...
Continue readingSponsor
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 readingArrival Shop
Accession in December 2024
More will appear in December! Pre-orders are also available.We hope you will order as soon as possible if you wish, as numbers are limited.
Continue readingPlant
What is a cactus. Origin and characteristics of ‘Cactos’ [1].
The word ‘Cactus’ derives from the Greek word ‘Kàktos’. The term was used by Theophrastus in his book HistoriaPlantarum to describe ‘unknown thorny plants’. The term ‘Cactus’ was subsequently adopted by the renowned botanist Linneo to define the American thorny...
Continue readingCode Web Without Plugin Woocommerce Wordpress
Without Plugin！How to display just any item on the Woocommerce My Account page.
The items on the Woocommerce My Account page vary depending on the products handled and the site they are on. For example, if you want to hide the ‘Dashboard’ and ‘Downloads’ items, you can achieve this by doing the following....
Continue readingPlant
What is Gymnocalycium vatteri?
Gymnocalycium vatteri is a cactus of the genus Gymnocalycium. Native to Argentina-Uruguay in South America, it is rich in varieties and delights horticultural enthusiasts. All of these are seedlings with a tangle of local globe seedlings. It was kept in...
Continue readingPlant
Astrophytum asterias.
It is one of the cacti with the greatest number of persistent enthusiasts. Astrophytum asterias is particularly popular because of the large number of varieties and the ease of both hybridisation and seed production. The lack of thorns is considered...
Continue readingCode Web Without Plugin Youtube
How to make YouTube embedding responsive while maintaining proportions with CSS.
Learn how to make YouTube embeds responsive while maintaining the ratio. 1. １：Add div tag.2. ２：Add css.3. Finalise. １：Add div tag. Add a div tag to enclose the iframe tag. <div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/YUDbl9qBihk?si=RRyI62O5tVSEfHvo" title="YouTube video player" frameborder="0" allow="accelerometer;...
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 reading