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'
endInclude 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-gistidattribute with the ID of the gist you want to embed. - Specify the
layoutandheightattributes 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-fileattribute with the name of the file you want to embed. - Specify the
data-gistid,layout, andheightattributes 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);
}
});
