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 tag
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.
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);
}
});
