Noizio helps you to focus with a little ambient sound, whether it’s raindrops falling, the buzz of a coffee shop, or something else.

Noizio brings those sounds to the desktop in the form of a menubar app for your Mac or an iOS Mobile App.

The App allows you to mash up different sounds and adjust each with a slider.

Noizio …

okayNav aims to progressively collapse navigation links into an off-screen navigation, instead of doing it for all the links at the same time.

okayNav@GitHub

jQuery-Notebook is a simple, clean and elegant WYSIWYG rich text editor.

Available commands:

• Ctrl/Command B – Bold
• Ctrl/Command I – Italic
• Ctrl/Command U – Underline
• Ctrl/Command F1 – Header 1
• Ctrl/Command F2 – Header 2
• Ctrl/Command Z – Undo

jQuery-Notebook

Had to use this for one of my latest Syntax Highlighting tweaks, so that I can use an ordered list,  line numbers and still be able to copy & paste the code :)

Enjoy coding…

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
   
   PHP

   add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 ); function xyz_amp_set_custom_template( $file, $type, $post ) { if ( 'single' === $type ) { $file = dirname( __FILE__ ) . '/templates/my-amp-template.php'; } return $file; }

   1 2 3 4 5 6 7 8

   add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );   function xyz_amp_set_custom_template( $file, $type, $post ) {     if ( 'single' === $type ) {         $file = dirname( __FILE__ ) . '/templates/my-amp-template.php';     }     return $file; }

   
   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_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' ); add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

   1 2	add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' ); add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

   
   Add this to the top of your custom template:
   
   PHP

   // Load phpQuery require ('my-libs/phpQuery/phpQuery.php'); // Load GesSHi require ('my-libs/geshi/geshi.php'); // Get AMP content and add it to phpQuery $doc = phpQuery::newDocumentHTML($this->get('post_amp_content')); $highlight = array(); // Loop through the code snippets (pre tags) foreach(pq('pre') as $snippet) { // Get classes of tag $class = pq($snippet)->attr("class"); // Check for Crayon Syntax Highlighter Class if (strpos($class, "lang:") !== false && strpos($class, "lang:default") === false) { preg_match("/lang:(?P<lang>\w+)/", $class, $catch); } else { // Fallback, if no language is detected $catch['lang'] = "php"; } // New Syntax Highlighter for each code snippet, with the correct language set // Storing for later stylesheet output. This makes also sure that stylesheets are only loaded once. $highlight[$catch['lang']] = new GeSHi(pq($snippet)->text() , $catch['lang']); // Uses Classes and no inlien styles $highlight[$catch['lang']]->enable_classes(); // Update code snippet $html = pq($snippet)->html($highlight[$catch['lang']]->parse_code()); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

   // Load phpQuery require ('my-libs/phpQuery/phpQuery.php');   // Load GesSHi require ('my-libs/geshi/geshi.php');   // Get AMP content and add it to phpQuery   $doc = phpQuery::newDocumentHTML($this->get('post_amp_content')); $highlight = array();   // Loop through the code snippets (pre tags)   foreach(pq('pre') as $snippet) {   // Get classes of tag   $class = pq($snippet)->attr("class");   // Check for Crayon Syntax Highlighter Class   if (strpos($class, "lang:") !== false && strpos($class, "lang:default") === false) { preg_match("/lang:(?P<lang>\w+)/", $class, $catch); } else {   // Fallback, if no language is detected   $catch['lang'] = "php"; }   // New Syntax Highlighter for each code snippet, with the correct language set // Storing for later stylesheet output. This makes also sure that stylesheets are only loaded once.   $highlight[$catch['lang']] = new GeSHi(pq($snippet)->text() , $catch['lang']);   // Uses Classes and no inlien styles   $highlight[$catch['lang']]->enable_classes();   // Update code snippet   $html = pq($snippet)->html($highlight[$catch['lang']]->parse_code()); }

   
   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
   
   
   PHP

   <style amp-custom> <?php $this->load_parts( array( 'style' ) ); ?><?php do_action( 'amp_post_template_css', $this ); // Load Stylesheets for highlighted languages foreach($highlight as $store){ echo $store->get_stylesheet(); } ?> </style>

   1 2 3 4 5 6 7 8 9 10 11 12

   <style amp-custom> <?php $this->load_parts( array( 'style' ) ); ?><?php do_action( 'amp_post_template_css', $this );      // Load Stylesheets for highlighted languages foreach($highlight as $store){   echo $store->get_stylesheet(); } ?> </style>

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

   <div class="amp-wp-content"> <h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1> <ul class="amp-wp-meta"> <?php $this->load_parts( apply_filters( 'amp_post_template_meta_parts', array( 'meta-author', 'meta-time', 'meta-taxonomy' ) ) ); ?> </ul> <?php echo $doc->html(); // amphtml content; no kses ?> </div>

   1 2 3 4 5 6 7

   <div class="amp-wp-content"> <h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1> <ul class="amp-wp-meta"> <?php $this->load_parts( apply_filters( 'amp_post_template_meta_parts', array( 'meta-author', 'meta-time', 'meta-taxonomy' ) ) ); ?> </ul> <?php  echo  $doc->html();  // amphtml content; no kses ?> </div>

   
   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 …