CHECKING STATUS
I AM LISTENING TO
|

Make Syntax Highlighting work in AMP-WP using GeSHi

5. February 2016
.SHARE

Table of Contents

Again another Google AMP article, this time dealing with Syntax Highlighting. If you have a code centric website, this is important.

In one of my last articles I talked about a Generic Syntax Highlighter.   This time I want to show you, how to add Syntax Highlighting with GeSHi to a custom template in AMP-WP.

FIRST SOME RESOURCES

Please read up on documentation, as I am not diving into every detail.

  1. AMP-WP – github.com/Automattic/amp-wp / Documentation
    The WordPress AMP integration. We will be using a custom template for our AMP pages.
  2. Crayon Syntax Highlighter – github.com/aramk/crayon-syntax-highlighter
    I am using this for Syntax Highlighting on none AMP pages. It adds specific language classes to the code / pre areas, that I am using to configure GeSHi.
  3. GeSHi – github.com/GeSHi/geshi-1.0
    The Syntax Highlighter
  4. phpQuery – github.com/punkave/phpQuery
    DOM Document transversal & modification simplified. You should be able to apply the things below with any other tool as well.
  5. My tweaks on GitHub

ADDING GESHI TO AMP-WP

Upload GeSHi and phpQuery to your desired location on your webserver.

Call the custom template for AMP-WP in your functions.php

I have an example stored on GitHub

Create a custom template in your themes folder.We could use the following filters, but its easier to use the custom template, due to the GeSHi style setup. The problem is, that the style action is called before the content action within the template. But I am planning to build a TWIG template for myself, as I am running Timber everywhere. That will detach logic and content completely, allowing to rethink some of these things and make styling a lot easier :) So watch out for my next article!

Add this to the top of your custom template:

I have an example stored on GitHub. The above works, if you are using Crayon Syntax Highlighter for standard pages.
If you use something else, this needs to be changed.

Add the GeSHi styles to the amp-custom style tag

I have an example stored on GitHub.

Output updated amp-wp-content

I have an example stored on GitHub.

Save and check that your AMP page validates, by adding #development=1 to the end of the url. Check the console for errors.

Enjoy coding …

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

Days Of Docker 6

Day 6: Monocker – Monitor Docker – 7 Days of Docker

Monitoring the health and status of Docker containers is crucial for maintaining a reliable and efficient environment. Monocker is a lightweight tool designed to address this need by monitoring Docker container state changes and sending real-time alerts through various messaging platforms. What is Monocker? Monocker, short for “MONitors dOCKER,” is an open-source application that keeps […]

The Letters Of The Alphabet Are Arranged Crosswise 2023 11 27 05 02 11 Utc

Best Solutions to Run WordPress Locally 2025

Running WordPress locally is essential for testing, development, and experimentation without affecting a live website. There are several solutions available, each catering to different needs. Below, we explore the best ways to set up WordPress on your local machine, along with useful links. 1. Local by Flywheel Local by Flywheel is a user-friendly tool that simplifies […]

Days Of Docker5

Day 5: mosparo an Open-Source Spam Protection solution – 7 Days of Docker

If you’re looking for an efficient and streamlined way to integrate mosparo, an open-source spam protection solution, into your workflow, running it via Docker is an excellent choice. Docker allows you to deploy mosparo quickly without worrying about dependencies or manual configurations. In this guide, we’ll walk through setting up mosparo with Docker. Prerequisites Before getting […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.