Code Block

Code Block Code Block

Table of Contents

This theme supports syntax highlighting based on Rouge, which is the default highlighter in Jekyll 3 and above. All CSS styles for syntax highlighting stores in the amp-syntax-highlight.css under the _includes/css/ directory.

By default, this theme excludes the CSS styles for syntax highlighting. The AMP framework limits the total CSS styles up to 75,000 bytes per AMP page. This keeps light-weight and rendering fast.

To include the stylesheet on-demand, you need to add the following to your post’s front matter:

css:
  syntax: true

Markdown Syntax

Code can be presented in the following ways:

Code spans

To denote a word or phrase as code, enclose it in backticks (`). For example:

The HTML `<body>` Element represents the content of an HTML document.

Output:

The HTML <body> Element represents the content of an HTML document.

Fenced code blocks

Use three backticks (```) or three tildes (~~~) on the lines before and after the code block with providing an easier way to specify the language, namely by appending the language of the code block to the end of the starting line. For example:

```ruby
def what?
  42
end
```

Output:

def what?
  42
end

Use highlight tags

For example:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

Output:

def foo
  puts 'foo'
end

Include line numbers

Including the linenos argument will force the highlighted code to include line numbers.

{% highlight ruby linenos %}
def foo
  puts 'foo'
end
{% endhighlight %}

Output:

1
2
3
def foo
  puts 'foo'
end

More information about code highlighting in jekyll can be found in Jekyll and kramdown documentation.

Embedding gists

A gist is a simple way to share snippets and pastes with others. To embed a gist in your markdown file, you need to use the <amp-gist> component in your markdown file. You will also need to set the following in front matter of a page or post that contains the <amp-gist> component:

   amp:
     gist: true

To embed an entire gist, you need to:

  • Specify the data-gistid attribute with the ID of the gist you want to embed.
  • Specify the layout and height attributes for the component.

For example, to embed the gist with the ID a1b2c3d4, you can use the following code:

<amp-gist data-gistid="a1b2c3d4" layout="fixed-height" height="300"></amp-gist>

To embed one file out of a gist, you need to:

  • Specify the data-file attribute with the name of the file you want to embed.
  • Specify the data-gistid, layout, and height attributes as before.

For example, to embed the file hello.py from the gist with the ID a1b2c3d4, you can use the following code:

<amp-gist data-gistid="a1b2c3d4" data-file="hello.py" layout="fixed-height" height="300"></amp-gist>

To learn more about the <amp-gist> component, you can visit the official documentation on https://amp.dev/documentation/components/websites/amp-gist.

More Samples

There are a couple of examples showing the resulting highlighted code:

HTML Code Sample

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

CSS Code Sample

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

JavaScript Code Sample

$.ajax({
  type: 'POST',
  url: 'backend.php',
  data: "q="+myform.serialize(),
  success: function(data){
    // on success use return data here
  },
  error: function(xhr, type, exception) {
    // if ajax fails display error alert
    alert("ajax error response type "+type);
  }
});
Loading Disqus Comments...
Please enable JavaScript to view the comments powered by Disqus.