forked from mmistakes/so-simple-theme
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
223 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| --- | ||
| layout: post | ||
| title: Syntax Highlighting Post | ||
| description: "Demo post displaying the various ways of highlighting code in Markdown." | ||
| category: articles | ||
| tags: [sample post, code, highlighting] | ||
| image: | ||
| feature: so-simple-sample-image-5.jpg | ||
| credit: Michael Rose | ||
| creditlink: http://mademistakes.com | ||
| comments: true | ||
| --- | ||
|
|
||
| Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1] | ||
|
|
||
| [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting> | ||
|
|
||
| ### Pygments Code Blocks | ||
|
|
||
| To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`. | ||
|
|
||
| {% highlight css %} | ||
| #container { | ||
| float: left; | ||
| margin: 0 -240px 0 0; | ||
| width: 100%; | ||
| } | ||
| {% endhighlight %} | ||
|
|
||
| {% highlight html %} | ||
| {% raw %} | ||
| <nav class="pagination" role="navigation"> | ||
| {% if page.previous %} | ||
| <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> | ||
| {% endif %} | ||
| {% if page.next %} | ||
| <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> | ||
| {% endif %} | ||
| </nav><!-- /.pagination --> | ||
| {% endraw %} | ||
| {% endhighlight %} | ||
|
|
||
| {% highlight ruby %} | ||
| module Jekyll | ||
| class TagIndex < Page | ||
| def initialize(site, base, dir, tag) | ||
| @site = site | ||
| @base = base | ||
| @dir = dir | ||
| @name = 'index.html' | ||
| self.process(@name) | ||
| self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') | ||
| self.data['tag'] = tag | ||
| tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' | ||
| tag_title_suffix = site.config['tag_title_suffix'] || '–' | ||
| self.data['title'] = "#{tag_title_prefix}#{tag}" | ||
| self.data['description'] = "An archive of posts tagged #{tag}." | ||
| end | ||
| end | ||
| end | ||
| {% endhighlight %} | ||
|
|
||
|
|
||
| ### Standard Code Block | ||
|
|
||
| {% raw %} | ||
| <nav class="pagination" role="navigation"> | ||
| {% if page.previous %} | ||
| <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> | ||
| {% endif %} | ||
| {% if page.next %} | ||
| <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> | ||
| {% endif %} | ||
| </nav><!-- /.pagination --> | ||
| {% endraw %} | ||
|
|
||
|
|
||
| ### Fenced Code Blocks | ||
|
|
||
| To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`. | ||
|
|
||
| ~~~ css | ||
| #container { | ||
| float: left; | ||
| margin: 0 -240px 0 0; | ||
| width: 100%; | ||
| } | ||
| ~~~ | ||
|
|
||
| ~~~ html | ||
| {% raw %}<nav class="pagination" role="navigation"> | ||
| {% if page.previous %} | ||
| <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a> | ||
| {% endif %} | ||
| {% if page.next %} | ||
| <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a> | ||
| {% endif %} | ||
| </nav><!-- /.pagination -->{% endraw %} | ||
| ~~~ | ||
|
|
||
| ~~~ ruby | ||
| module Jekyll | ||
| class TagIndex < Page | ||
| def initialize(site, base, dir, tag) | ||
| @site = site | ||
| @base = base | ||
| @dir = dir | ||
| @name = 'index.html' | ||
| self.process(@name) | ||
| self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') | ||
| self.data['tag'] = tag | ||
| tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' | ||
| tag_title_suffix = site.config['tag_title_suffix'] || '–' | ||
| self.data['title'] = "#{tag_title_prefix}#{tag}" | ||
| self.data['description'] = "An archive of posts tagged #{tag}." | ||
| end | ||
| end | ||
| end | ||
| ~~~ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| .highlight { | ||
| overflow-x: auto; | ||
| margin-bottom: 1.5em; | ||
| .font(12); | ||
| border: 1px solid darken(@body-color, 5); | ||
| pre { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -120,4 +120,5 @@ li { | |
| } | ||
| pre { | ||
| .font(12); | ||
| overflow-x: auto; | ||
| } | ||