I AM LISTENING TO
|
WAS ICH LIEBE
  • Englisch
  • Deutsch

Make Syntax Highlighting work in AMP-WP using GeSHi

4. März 2016




Make Syntax Highlighting work in AMP-WP using GeSHi

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

  1. Upload GeSHi and phpQuery to your desired location on your webserver.
  2. Call the custom template for AMP-WP in your functions.php

    I have an example stored on GitHub
  3. 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.
  4. Add the GeSHi styles to the amp-custom style tag


    I have an example stored on GitHub.
  5. Output updated amp-wp-content


    I have an example stored on GitHub.
  6. Save and check that your AMP page validates, by adding #development=1 to the end of the url. Check the console for errors.
    Show this page as AMP

Enjoy coding …




Abonnieren
Benachrichtige mich bei
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments



Alexander

Ich bin ein Full-Stack-Entwickler. Meine Expertise umfasst:

  • Server-, Netzwerk- und Hosting-Umgebungen
  • Datenmodellierung / Import / Export
  • Geschäftslogik
  • API Layer / Action Layer / MVC
  • Benutzeroberflächen
  • User Experience
  • Verständnis für Kundenwünsche und Geschäftsbedürfnisse

 

Ich liebe die Entwicklung, das Design und kenne mich auch mit Serverarchitekturen aus.  Ich würde mich nie vollständig fühlen, wenn einer der Bereiche fehlen würde.

Ich habe ein breites Interessengebiet, deshalb tauche ich ständig in neue Technologien ein und erweitere mein Wissen, wo immer es nötig ist. Die Technologien entwickeln sich schnell und ich genieße es, die neuesten Technologien zu nutzen.

Abgesehen davon bin ich ein friedliebender Kerl, der versucht, Leute um sich herum zu haben, die dasselbe denken.  Ich glaube wirklich an das Prinzip: "Wenn man jemandem hilft, wird einem jemand helfen, wenn man es braucht."

Previous Next