<!DOCTYPE html>
<html lang="en">
<head>
<title>aⱼni // Alex Ibrado's blog</title>
<meta charset="UTF-8">
<meta name="description" content="Alex Ibrado's blog">
<meta name="theme-color" content="#222222" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/jquery.sticky-kit.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/header.js"></script>
<script src="/assets/js/toc.js"></script>
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/theme.css" rel="stylesheet">
<link href="/assets/css/syntax.css" rel="stylesheet">
<link href="/assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/assets/css/fontcustom/fontcustom.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif%7CNoto+Sans%7CBree+Serif%7CHeadland+One" rel="stylesheet">
<link rel="canonical" href="https://ibrado.org/jvs/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-79592402-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="font-size: 1.6em; line-height: 1.75">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '158847277489265',
xfbml : true,
version : 'v2.11'
});
FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=158847277489265';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
WebFontConfig = {
google: {
families: ['Ubuntu::latin']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<script>
$(document).ready(function(){
check_sticky_width();
$(window).resize(function() {
check_sticky_width();
});
function check_sticky_width() {
if($(".container").width() < 768) {
$("#side-col").trigger("sticky_kit:detach");
} else {
make_sticky();
}
}
function make_sticky() {
$("#side-col, #main-col").stick_in_parent({ parent: '.row'})
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
}
});
</script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand large" href="/"><img src="/favicon-32x32.png" height="32" width="32" class="site-logo" alt="[!]"/> aⱼni</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">/home</a></li>
<li><a href="/meta/">/meta</a></li>
<li><a href="/archive/">/archive</a></li>
<li><a href="/about/">/about</a></li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div id="main-content" class="content">
<div class="container container-center">
<div class="row">
<div id="main-col" class="col-md-8">
<div class="well">
<div class="small page-number">
<a href="/jvs.md-src.html">View source</a>
</div>
<h1 id="jekyllviewsource">Jekyll::ViewSource</h1>
<p><a href="https://badge.fury.io/rb/jekyll-viewsource"><img src="https://badge.fury.io/rb/jekyll-viewsource.svg" alt="Gem Version" /></a></p>
<p><em>Jekyll:ViewSource</em> is a plugin for <a href="https://jekyllrb.com/">Jekyll</a> that generates plain or pretty Markdown and HTML source code pages from your content.</p>
<h2 id="installation">Installation</h2>
<p>Add the gem to your application’s Gemfile:</p>
<div class="language-ruby highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="n">group</span> <span class="ss">:jekyll_plugins</span> <span class="k">do</span>
<span class="c1"># other plugins here</span>
<span class="n">gem</span> <span class="s1">'jekyll-viewsource'</span>
<span class="k">end</span>
</code></pre>
</div>
</div>
<p>And then execute:</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>$ bundle
</code></pre>
</div>
</div>
<p>Or install it yourself:</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>$ gem install jekyll-viewsource
</code></pre>
</div>
</div>
<h2 id="configuration">Configuration</h2>
<p>No configuration is required to run <em>Jekyll::ViewSource</em>. If you want to tweak its behavior, you may set the following options in <code class="highlighter-rouge">_config.yml</code>:</p>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span>
<span class="c1">#enabled: false # Default: true</span>
<span class="na">debug</span><span class="pi">:</span> <span class="no">true</span> <span class="c1"># Show additional messages during run; default: false</span>
<span class="c1">#collection: pages, "articles" # Which collections to paginate; default: pages and posts</span>
<span class="na">collections</span><span class="pi">:</span> <span class="c1"># Ditto, just a different way of writing it</span>
<span class="pi">-</span> <span class="s">pages</span> <span class="c1"># Quotes are optional if collection names are obviously strings</span>
<span class="pi">-</span> <span class="s">posts</span>
<span class="pi">-</span> <span class="s">articles</span>
<span class="na">options</span><span class="pi">:</span> <span class="s">pretty</span> <span class="c1"># Options that normally go in a doc's front matter</span>
</code></pre>
</div>
</div>
<h2 id="usage">Usage</h2>
<p>Just add a <code class="highlighter-rouge">viewsource: true</code> entry to the front-matter of the content for you want to create source files:</p>
<h3 id="plain-markdown">Plain Markdown</h3>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="nn">---</span>
<span class="na">viewsource</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre>
</div>
</div>
<p>(or <code class="highlighter-rouge">viewsource: md</code> or <code class="highlighter-rouge">viewsource: markdown</code>)</p>
<h3 id="plain-html">Plain HTML</h3>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span> <span class="s">html</span>
</code></pre>
</div>
</div>
<h3 id="plain-markdown-and-html">Plain Markdown and HTML</h3>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span> <span class="s">markdown, html</span>
</code></pre>
</div>
</div>
<h3 id="prettified">Prettified</h3>
<p>Add <code>pretty[="<rouge_template|css_path>"]</code>, e.g.</p>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span> <span class="s">markdown, html, pretty</span>
</code></pre>
</div>
</div>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span> <span class="s">markdown, html, pretty="thankful_eyes"</span>
</code></pre>
</div>
</div>
<div class="language-yaml highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="na">viewsource</span><span class="pi">:</span> <span class="s">markdown, html, pretty="/url/path/to/syntax.css"</span>
</code></pre>
</div>
</div>
<p>You may show the themes currently supported by Rouge via the command line:</p>
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>$ rougify help style
</code></pre>
</div>
</div>
<p>As of this writing, these are:</p>
<ul>
<li>base16, base16.dark, base16.light</li>
<li>base16.monokai, base16.monokai.dark, base16.monokai.light</li>
<li>base16.solarized, base16.solarized.dark, base16.solarized.light</li>
<li>colorful</li>
<li>github</li>
<li>gruvbox, gruvbox.dark, gruvbox.light</li>
<li>igorpro</li>
<li>molokai</li>
<li>monokai, monokai.sublime</li>
<li>thankful_eyes</li>
<li>tulip</li>
</ul>
<p>The default is <code class="highlighter-rouge">github</code></p>
<h3 id="source-file-links">Source file links</h3>
<p>To link to your source files, use the following:</p>
<dl>
<dt><code class="highlighter-rouge">{{ page.source_url }}</code></dt>
<dd>The plain or pretty Markdown source URL</dd>
<dt><code class="highlighter-rouge">{{ page.html_source_url }}</code></dt>
<dd>The plain or pretty HTML source URL</dd>
</dl>
<p>e.g.</p>
<div class="language-liquid highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>[View Markdown source](<span class="p">{{</span><span class="w"> </span><span class="nv">page</span><span class="p">.</span><span class="nv">source_url</span><span class="w"> </span><span class="p">}}</span>)
[View HTML source](<span class="p">{{</span><span class="w"> </span><span class="nv">page</span><span class="p">.</span><span class="nv">html_source_url</span><span class="w"> </span><span class="p">}}</span>)
</code></pre>
</div>
</div>
<p><a href="/jvs.md-src.html">View Markdown source</a><br />
<a href="/jvs/index.html-src.html">View HTML source</a></p>
<h2 id="contributing">Contributing</h2>
<ol>
<li>Fork this project: <a href="https://github.com/ibrado/jekyll-viewsource/fork">https://github.com/ibrado/jekyll-viewsource/fork</a></li>
<li>Clone it (<code class="highlighter-rouge">git clone git://github.com/your_user_name/jekyll-viewsource.git</code>)</li>
<li><code class="highlighter-rouge">cd jekyll-viewsource</code></li>
<li>Create a new branch (e.g. <code class="highlighter-rouge">git checkout -b my-bug-fix</code>)</li>
<li>Make your changes</li>
<li>Commit your changes (<code class="highlighter-rouge">git commit -m "Bug fix"</code>)</li>
<li>Build it (<code class="highlighter-rouge">gem build jekyll-viewsource.gemspec</code>)</li>
<li>Install and test it (<code class="highlighter-rouge">gem install ./jekyll-viewsource-*.gem</code>)</li>
<li>Repeat from step 5 as necessary</li>
<li>Push the branch (<code class="highlighter-rouge">git push -u origin my-bug-fix</code>)</li>
<li>Create a Pull Request, making sure to select the proper branch, e.g. <code class="highlighter-rouge">my-bug-fix</code> (via https://github.com/your_user_name/jekyll-viewsource)</li>
</ol>
<p>Bug reports and pull requests are welcome on GitHub at <a href="https://github.com/ibrado/jekyll-viewsource">https://github.com/ibrado/jekyll-viewsource</a>. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the <a href="http://contributor-covenant.org">Contributor Covenant</a> code of conduct.</p>
<h2 id="license">License</h2>
<p>The gem is available as open source under the terms of the <a href="https://opensource.org/licenses/MIT">MIT License</a>.</p>
<h2 id="code-of-conduct">Code of Conduct</h2>
<p>Everyone interacting in the Jekyll::ViewSource project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the <a href="https://github.com/[USERNAME]/jekyll-viewsource/blob/master/CODE_OF_CONDUCT.md">code of conduct</a>.</p>
<h2 id="also-by-the-author">Also by the Author</h2>
<p><a href="https://github.com/ibrado/jekyll-stickyposts">Jekyll Stickyposts Plugin</a> - Move/pin posts tagged <code class="highlighter-rouge">sticky: true</code> before all others. Sorting on custom fields supported; collection and paginator friendly.</p>
<p><a href="https://github.com/ibrado/jekyll-tweetsert">Jekyll Tweetsert Plugin</a> - Turn tweets into Jekyll posts. Multiple timelines, filters, hashtags, automatic category/tags, and more!</p>
<p><a href="https://github.com/ibrado/jekyll-tweetsert">Jekyll::Paginate::Content</a> - Split your Jekyll pages, posts, etc. into multiple pages automatically. Single-page view, pager, SEO support, self-adjusting links, multipage-aware Table Of Contents.</p>
</div>
</div>
<div id="side-col" class="col-md-4 hidden-xs">
<div class="sidebar ">
<h4>Recent Posts</h4>
<ul>
<li><a href="/2017/12/jpc-demo-post/">JPC demo: Post</a></li>
<li><a href="/2017/12/lets-encrypt-2018/">Wildcard certs from Let's Encrypt in 2018!</a></li>
<li><a href="/2017/12/goodbye-duchess/">Goodbye, Duchess...</a></li>
<li><a href="/2017/12/using-my-patched-paginator/">Using my patched paginator</a></li>
<li><a href="/2017/12/my-first-ruby-code/">My first Ruby code...</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-distributed">
<div class="container">
<div class="footer">
<p>© 2017 Alexander J. N. Ibrado</p>
<ul class="social-media">
<li>
<a title="ibrado on Facebook" href="https://facebook.com/ibrado" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
</li>
<li>
<a title="ibrado on Twitter" href="https://twitter.com/ibrado" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</li>
<li>
<a title="ibrado on Github" href="https://github.com/ibrado" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</li>
<li>
<a title="ibrado on LinkedIn" href="https://www.linkedin.com/in/ibrado" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</li>
<li>
<a title="feed.xml RSS" href="/feed.xml" target="_blank"><i class="fa fa-rss fa-2x"></i></a>
</li>
</ul>
</div>
<div class="validators">
<button class="validated html small" onclick="location.href='https://validator.w3.org/nu/?doc=https://ibrado.org/jvs/'"><i class="fa fa-check" aria-hidden="true"></i> </button>
<button class="validated css small" onclick="location.href='https://jigsaw.w3.org/css-validator/validator?uri=https://ibrado.org/assets/css/theme.css&profile=css3&usermedium=all&warning=no&vextwarning=&lang=en'"><i class="fa fa-check" aria-hidden="true"></i> </button>
<button class="validated rss small" onclick="location.href='https://validator.w3.org/feed/check.cgi?url=https://ibrado.org/feed.xml'"><i class="fa fa-check" aria-hidden="true"></i> </button>
</div>
</div>
</footer>
<script>
var clipboard = new Clipboard('.copier');
</script>
</div>
</body>
</html>