Jekyll2023-09-24T02:26:54+00:00https://ykjain.github.io/feed.xmlYajit Jainyajit@broadinstitute.orgYajit JainHello Hydeout2017-06-01T00:00:00+00:002017-06-01T00:00:00+00:00https://ykjain.github.io/2017/06/01/hello-hydeout<p>Hydeout updates the original <a href="https://github.com/poole/hyde">Hyde</a>
theme for <a href="http://jekyllrb.com">Jekyll</a> 3.x and 4.x and adds new functionality.</p>
<h3 id="keep-it-simple">Keep It Simple</h3>
<p>In keeping with the original Hyde theme, Hydeout aims to keep the overall
design lightweight and plugin-free. JavaScript is currently limited only
to Disqus and Google Analytics (and is only loaded if you provide configuration
variables).</p>
<p>Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
the CSS degrades into a single column layout.</p>
<h3 id="customization">Customization</h3>
<p>Hydeout replaces Hyde’s class-based theming with the use
of the following SASS variables:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$sidebar-bg-color</span><span class="p">:</span> <span class="mh">#202020</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$sidebar-fg-color</span><span class="p">:</span> <span class="no">white</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$sidebar-sticky</span><span class="p">:</span> <span class="bp">true</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$layout-reverse</span><span class="p">:</span> <span class="bp">false</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$link-color</span><span class="p">:</span> <span class="mh">#268bd2</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
</code></pre></div></div>
<p>To override these variables, create your own <code class="language-plaintext highlighter-rouge">assets/css/main.scss</code> file.
Define your own variables, then import in Hydeout’s SCSS, like so:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
# Jekyll needs front matter for SCSS files
---
$sidebar-bg-color: #ac4142;
$link-color: #ac4142;
$sidebar-sticky: false;
@import "hydeout";
</code></pre></div></div>
<p>See the <a href="https://github.com/fongandrew/hydeout/blob/master/_sass/hydeout/_variables.scss">_variables</a> file for other variables
you can override.</p>
<p>You can also insert custom head tags (e.g. to load your own stylesheets) by
defining your own <code class="language-plaintext highlighter-rouge">_includes/custom-head.html</code> or insert tags at the end
of the body (e.g. for custom JS) by defining your own
<code class="language-plaintext highlighter-rouge">_includes/custom-foot.html</code>.</p>
<h3 id="new-features">New Features</h3>
<ul>
<li>
<p>Hydeout also adds a new tags page (accessible in the sidebar) and a new
“category” layout for dedicated category pages.</p>
</li>
<li>
<p>Category pages are automatically added to the sidebar. All other pages
must have <code class="language-plaintext highlighter-rouge">sidebar_link: true</code> in their front matter to show up in
the sidebar.</p>
</li>
<li>
<p>A simple redirect-to-Google search is available. If you want to use
Google Custom Search or Algolia or something with more involved,
override the <code class="language-plaintext highlighter-rouge">search.html</code>.</p>
</li>
<li>
<p>Disqus integration is ready out of the box. Just add the following to
your config file:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">disqus</span><span class="pi">:</span>
<span class="na">shortname</span><span class="pi">:</span> <span class="s">my-disqus-shortname</span>
</code></pre></div> </div>
<p>If you don’t want Disqus or want to use something else, override
<code class="language-plaintext highlighter-rouge">comments.html</code>.</p>
</li>
<li>
<p>For Google Analytics support, define a <code class="language-plaintext highlighter-rouge">google_analytics</code> variable with
your property ID in your config file.</p>
</li>
</ul>
<p>There’s also a bunch of minor tweaks and adjustments throughout the
theme. Hope this works for you!</p>Yajit JainHydeout updates the original Hyde theme for Jekyll 3.x and 4.x and adds new functionality. Keep It Simple In keeping with the original Hyde theme, Hydeout aims to keep the overall design lightweight and plugin-free. JavaScript is currently limited only to Disqus and Google Analytics (and is only loaded if you provide configuration variables). Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available, the CSS degrades into a single column layout. Customization Hydeout replaces Hyde’s class-based theming with the use of the following SASS variables: $sidebar-bg-color: #202020 !default; $sidebar-fg-color: white !default; $sidebar-sticky: true !default; $layout-reverse: false !default; $link-color: #268bd2 !default; To override these variables, create your own assets/css/main.scss file. Define your own variables, then import in Hydeout’s SCSS, like so: --- # Jekyll needs front matter for SCSS files --- $sidebar-bg-color: #ac4142; $link-color: #ac4142; $sidebar-sticky: false; @import "hydeout"; See the _variables file for other variables you can override. You can also insert custom head tags (e.g. to load your own stylesheets) by defining your own _includes/custom-head.html or insert tags at the end of the body (e.g. for custom JS) by defining your own _includes/custom-foot.html. New Features Hydeout also adds a new tags page (accessible in the sidebar) and a new “category” layout for dedicated category pages. Category pages are automatically added to the sidebar. All other pages must have sidebar_link: true in their front matter to show up in the sidebar. A simple redirect-to-Google search is available. If you want to use Google Custom Search or Algolia or something with more involved, override the search.html. Disqus integration is ready out of the box. Just add the following to your config file: disqus: shortname: my-disqus-shortname If you don’t want Disqus or want to use something else, override comments.html. For Google Analytics support, define a google_analytics variable with your property ID in your config file. There’s also a bunch of minor tweaks and adjustments throughout the theme. Hope this works for you!Introducing Hyde2013-12-28T00:00:00+00:002013-12-28T00:00:00+00:00https://ykjain.github.io/2013/12/28/introducing-hyde<p>Hyde is a brazen two-column <a href="http://jekyllrb.com">Jekyll</a> theme that pairs a prominent sidebar with uncomplicated content. It’s based on <a href="http://getpoole.com">Poole</a>, the Jekyll butler.</p>
<h3 id="built-on-poole">Built on Poole</h3>
<p>Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by <a href="https://twitter.com/mdo">@mdo</a>. Poole, and every theme built on it (like Hyde here) includes the following:</p>
<ul>
<li>Complete Jekyll setup included (layouts, config, <a href="/404">404</a>, <a href="/feed.xml">RSS feed</a>, posts, and <a href="/about">example page</a>)</li>
<li>Mobile friendly design and development</li>
<li>Easily scalable text and component sizing with <code class="language-plaintext highlighter-rouge">rem</code> units in the CSS</li>
<li>Support for a wide gamut of HTML elements</li>
<li>Related posts (time-based, because Jekyll) below each post</li>
<li>Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)</li>
</ul>
<h3 id="hyde-features">Hyde features</h3>
<p>In addition to the features of Poole, Hyde adds the following:</p>
<ul>
<li>Sidebar includes support for textual modules and a dynamically generated navigation with active link support</li>
<li>Two orientations for content and sidebar, default (left sidebar) and <a href="https://github.com/poole/hyde#reverse-layout">reverse</a> (right sidebar), available via <code class="language-plaintext highlighter-rouge"><body></code> classes</li>
<li><a href="https://github.com/poole/hyde#themes">Eight optional color schemes</a>, available via <code class="language-plaintext highlighter-rouge"><body></code> classes</li>
</ul>
<p><a href="https://github.com/poole/hyde#readme">Head to the readme</a> to learn more.</p>
<h3 id="browser-support">Browser support</h3>
<p>Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.</p>
<h3 id="download">Download</h3>
<p>Hyde is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/hyde">GitHub repository</a> for downloads, bug reports, and features requests.</p>
<p>Thanks!</p>Yajit JainHyde is a brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. It’s based on Poole, the Jekyll butler. Built on Poole Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by @mdo. Poole, and every theme built on it (like Hyde here) includes the following: Complete Jekyll setup included (layouts, config, 404, RSS feed, posts, and example page) Mobile friendly design and development Easily scalable text and component sizing with rem units in the CSS Support for a wide gamut of HTML elements Related posts (time-based, because Jekyll) below each post Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) Hyde features In addition to the features of Poole, Hyde adds the following: Sidebar includes support for textual modules and a dynamically generated navigation with active link support Two orientations for content and sidebar, default (left sidebar) and reverse (right sidebar), available via <body> classes Eight optional color schemes, available via <body> classes Head to the readme to learn more. Browser support Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above. Download Hyde is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests. Thanks!Example content2012-02-07T00:00:00+00:002012-02-07T00:00:00+00:00https://ykjain.github.io/2012/02/07/example-content<div class="message">
Howdy! This is an example blog post that shows several types of HTML content supported in this theme.
</div>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. <em>Aenean eu leo quam.</em> Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <strong>sem malesuada magna</strong> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2 id="inline-html-elements">Inline HTML elements</h2>
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
<ul>
<li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge"><strong></code>.</li>
<li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge"><em></code>.</li>
<li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge"><abbr></code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
<li>Citations, like <cite>— Mark otto</cite>, should use <code class="language-plaintext highlighter-rouge"><cite></code>.</li>
<li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
<li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge"><sup></code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></code>.</li>
</ul>
<p>Most of these elements are styled by browsers with few modifications on our part.</p>
<h2 id="heading">Heading</h2>
<p>Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3 id="code">Code</h3>
<p>Cum sociis natoque penatibus et magnis dis <code class="language-plaintext highlighter-rouge">code element</code> montes, nascetur ridiculus mus.</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Example can be run directly in your JavaScript console
</span>
<span class="c1">// Create a function that takes two arguments and returns the sum of those arguments
</span>
<span class="kd">var</span> <span class="nx">adder</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">b</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">return a + b</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// Call the function
</span>
<span class="nx">adder</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">6</span><span class="p">);</span>
<span class="c1">// > 8</span></code></pre></figure>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3 id="gists-via-github-pages">Gists via GitHub Pages</h3>
<p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.</p>
<script src="https://gist.github.com/5555251.js?file=gist.md"> </script>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
<h3 id="lists">Lists</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
<dl>
<dt>HyperText Markup Language (HTML)</dt>
<dd>The language used to describe and define the content of a Web page</dd>
<dt>Cascading Style Sheets (CSS)</dt>
<dd>Used to describe the appearance of Web content</dd>
<dt>JavaScript (JS)</dt>
<dd>The programming language used to build advanced Web sites and applications</dd>
</dl>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<h3 id="images">Images</h3>
<p>Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.</p>
<p><img src="https://placehold.it/800x400" alt="placeholder" title="Large example image" />
<img src="https://placehold.it/400x200" alt="placeholder" title="Medium example image" />
<img src="https://placehold.it/200x200" alt="placeholder" title="Small example image" /></p>
<h3 id="tables">Tables</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Upvotes</th>
<th>Downvotes</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Totals</td>
<td>21</td>
<td>23</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Alice</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>Bob</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>Charlie</td>
<td>7</td>
<td>9</td>
</tr>
</tbody>
</table>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<hr />
<p>Want to see something else added? <a href="https://github.com/poole/poole/issues/new">Open an issue.</a></p>Yajit JainHowdy! This is an example blog post that shows several types of HTML content supported in this theme. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Inline HTML elements HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network. To bold text, use <strong>. To italicize text, use <em>. Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase. Citations, like — Mark otto, should use <cite>. Deleted text should use <del> and inserted text should use <ins>. Superscript text uses <sup> and subscript text uses <sub>. Most of these elements are styled by browsers with few modifications on our part. Heading Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Code Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus. // Example can be run directly in your JavaScript console // Create a function that takes two arguments and returns the sum of those arguments var adder = new Function("a", "b", "return a + b"); // Call the function adder(2, 6); // > 8 Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa. Gists via GitHub Pages Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Lists Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. HyperText Markup Language (HTML) The language used to describe and define the content of a Web page Cascading Style Sheets (CSS) Used to describe the appearance of Web content JavaScript (JS) The programming language used to build advanced Web sites and applications Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Images Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at. Tables Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Name Upvotes Downvotes Totals 21 23 Alice 10 11 Bob 4 3 Charlie 7 9 Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Want to see something else added? Open an issue.What’s Jekyll?2012-02-06T00:00:00+00:002012-02-06T00:00:00+00:00https://ykjain.github.io/2012/02/06/whats-jekyll<p><a href="http://jekyllrb.com">Jekyll</a> is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From <a href="https://github.com/mojombo/jekyll/blob/master/README.markdown">the project’s readme</a>:</p>
<blockquote>
<p>Jekyll is a simple, blog aware, static site generator. It takes a template directory […] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.</p>
</blockquote>
<p>It’s an immensely useful tool and one we encourage you to use here with Hyde.</p>
<p>Find out more by <a href="https://github.com/mojombo/jekyll">visiting the project on GitHub</a>.</p>Yajit JainJekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From the project’s readme: Jekyll is a simple, blog aware, static site generator. It takes a template directory […] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub. It’s an immensely useful tool and one we encourage you to use here with Hyde. Find out more by visiting the project on GitHub.Markup: Syntax Highlighting2012-02-05T00:00:00+00:002012-02-05T15:27:01+00:00https://ykjain.github.io/2012/02/05/markup-syntax-highlighting<p>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.<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup></p>
<h2 id="gfm-code-blocks">GFM Code Blocks</h2>
<p>GitHub Flavored Markdown <a href="https://help.github.com/articles/creating-and-highlighting-code-blocks/">fenced code blocks</a> are supported by default with Jekyll. You may need to update your <code class="language-plaintext highlighter-rouge">_config.yml</code> file to enable them if you’re using an older version.</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">kramdown</span><span class="pi">:</span>
<span class="na">input</span><span class="pi">:</span> <span class="s">GFM</span>
</code></pre></div></div>
<p>Here’s an example of a CSS code snippet written in GFM:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">#container</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">-240px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Yet another code snippet for demonstration purposes:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">module</span> <span class="nn">Jekyll</span>
<span class="k">class</span> <span class="nc">TagIndex</span> <span class="o"><</span> <span class="no">Page</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">site</span><span class="p">,</span> <span class="n">base</span><span class="p">,</span> <span class="n">dir</span><span class="p">,</span> <span class="n">tag</span><span class="p">)</span>
<span class="vi">@site</span> <span class="o">=</span> <span class="n">site</span>
<span class="vi">@base</span> <span class="o">=</span> <span class="n">base</span>
<span class="vi">@dir</span> <span class="o">=</span> <span class="n">dir</span>
<span class="vi">@name</span> <span class="o">=</span> <span class="s1">'index.html'</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">process</span><span class="p">(</span><span class="vi">@name</span><span class="p">)</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">read_yaml</span><span class="p">(</span><span class="no">File</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">base</span><span class="p">,</span> <span class="s1">'_layouts'</span><span class="p">),</span> <span class="s1">'tag_index.html'</span><span class="p">)</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">data</span><span class="p">[</span><span class="s1">'tag'</span><span class="p">]</span> <span class="o">=</span> <span class="n">tag</span>
<span class="n">tag_title_prefix</span> <span class="o">=</span> <span class="n">site</span><span class="p">.</span><span class="nf">config</span><span class="p">[</span><span class="s1">'tag_title_prefix'</span><span class="p">]</span> <span class="o">||</span> <span class="s1">'Tagged: '</span>
<span class="n">tag_title_suffix</span> <span class="o">=</span> <span class="n">site</span><span class="p">.</span><span class="nf">config</span><span class="p">[</span><span class="s1">'tag_title_suffix'</span><span class="p">]</span> <span class="o">||</span> <span class="s1">'&#8211;'</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">data</span><span class="p">[</span><span class="s1">'title'</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"</span><span class="si">#{</span><span class="n">tag_title_prefix</span><span class="si">}#{</span><span class="n">tag</span><span class="si">}</span><span class="s2">"</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">data</span><span class="p">[</span><span class="s1">'description'</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"An archive of posts tagged </span><span class="si">#{</span><span class="n">tag</span><span class="si">}</span><span class="s2">."</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</code></pre></div></div>
<h2 id="jekyll-highlight-liquid-tag">Jekyll Highlight Liquid Tag</h2>
<p>Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, using a dedicated Liquid tag as follows:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">highlight</span><span class="w"> </span>scss<span class="w"> </span><span class="p">%}</span>
.highlight {
margin: 0;
padding: 1em;
font-family: $monospace;
font-size: $type-size-7;
line-height: 1.8;
}
<span class="p">{%</span><span class="w"> </span><span class="nt">endhighlight</span><span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<p>And the output will look like this:</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nv">$monospace</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="nv">$type-size-7</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1</span><span class="mi">.8</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<p>Here’s an example of a code snippet using the Liquid tag and <code class="language-plaintext highlighter-rouge">linenos</code> enabled.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"pagination"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
{% if page.previous %}
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ page.previous.url }}"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">title=</span><span class="s">"{{ page.previous.title }}"</span><span class="nt">></span>Previous article<span class="nt"></a></span>
{% endif %}
{% if page.next %}
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ page.next.url }}"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">title=</span><span class="s">"{{ page.next.title }}"</span><span class="nt">></span>Next article<span class="nt"></a></span>
{% endif %}
<span class="nt"></nav></span><span class="c"><!-- /.pagination --></span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="code-blocks-in-lists">Code Blocks in Lists</h2>
<p>Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., <code class="language-plaintext highlighter-rouge">1.</code>). Usually this will mean indenting 3 spaces instead of 4.</p>
<ol>
<li>Do step 1.</li>
<li>
<p>Now do this:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
<span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=> prints 'Hi, Tom' to STDOUT.</span>
</code></pre></div> </div>
</li>
<li>Now you can do this.</li>
</ol>
<h2 id="github-gist-embed">GitHub Gist Embed</h2>
<p>GitHub Gist embeds can also be used:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"</span><span class="nt">></script></span>
</code></pre></div></div>
<p>Which outputs as:</p>
<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p><a href="http://en.wikipedia.org/wiki/Syntax_highlighting">http://en.wikipedia.org/wiki/Syntax_highlighting</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>Yajit JainPost displaying the various ways one can highlight code blocks with Jekyll. Some options include standard Markdown, GitHub Flavored Markdown, and Jekyll's `{% highlight %}` tag.Layout: Excerpt (Defined)2012-02-04T00:00:00+00:002012-02-04T17:43:31+00:00https://ykjain.github.io/layout/2012/02/04/layout-excerpt-defined<p>This is the start of the post content.</p>
<p>This paragraph should be absent from an index page where <code class="language-plaintext highlighter-rouge">post.excerpt</code> is shown.</p>Yajit JainThis is a user-defined post excerpt. It should be displayed in place of the auto-generated excerpt or post content on index pages.Layout: Excerpt (Generated with Separator Tag)2012-02-03T00:00:00+00:002012-02-03T17:32:16+00:00https://ykjain.github.io/layout/2012/02/03/layout-excerpt-generated<p>This is the post content. Archive-index pages should display an <a href="https://jekyllrb.com/docs/posts/#post-excerpts">auto-generated excerpt</a> of all the content preceding the <code class="language-plaintext highlighter-rouge">excerpt_separator</code>, as defined in the YAML Front Matter or globally in <code class="language-plaintext highlighter-rouge">_config.yml</code>.</p>
<p>Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn’t create any layout problems.</p>
<!--more-->
<p>Lorem ipsum dolor sit amet, dicant nusquam corpora in usu, laudem putent fuisset ut eam. Justo accusam definitionem id cum, choro prodesset ex his. Noluisse constituto intellegebat ea mei. Timeam admodum omnesque pri ex, eos habemus suavitate aliquando cu. Dico nihil delectus quo cu. Ludus cetero cu eos, vidit invidunt dissentiet mea ne.</p>
<p>Usu delenit vocibus elaboraret ex. Scripta sapientem adversarium ei pri, pri ex solet democritum. Nam te porro impedit, ei doctus albucius cotidieque pri, ea mutat causae lucilius has. Pri omnis errem labore ut. An aperiam tibique est, mei te dolore veritus, nam nulla feugait ut. In vis labitur eripuit contentiones.</p>Yajit JainThis is the post content. Archive-index pages should display an auto-generated excerpt of all the content preceding the excerpt_separator, as defined in the YAML Front Matter or globally in _config.yml. Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn’t create any layout problems.Markup: Title with Special — Characters2012-01-31T00:00:00+00:002012-01-31T17:23:27+00:00https://ykjain.github.io/markup/2012/01/31/markup-title-with-special-characters<p>Putting special characters in the title should have no adverse effect on the layout or functionality.</p>
<p>The title above has none-breaking spaces before and after the m-dash.</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="ni">&nbsp;</span>---<span class="ni">&nbsp;</span>
</code></pre></div></div>
<h2 id="latin-character-tests">Latin Character Tests</h2>
<p>This is a test to see if the fonts used in this theme support basic Latin characters.</p>
<table>
<tr>
<td>
!
</td>
<td>
“
</td>
<td>
#
</td>
<td>
$
</td>
<td>
%
</td>
<td>
&
</td>
<td>
‘
</td>
<td>
(
</td>
<td>
)
</td>
<td>
*
</td>
</tr>
<tr>
<td>
+
</td>
<td>
,
</td>
<td>
–
</td>
<td>
.
</td>
<td>
/
</td>
<td>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
<td>
8
</td>
<td>
9
</td>
<td>
:
</td>
<td>
;
</td>
<td>
>
</td>
<td>
=
</td>
<td>
<
</td>
</tr>
<tr>
<td>
?
</td>
<td>
@
</td>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
<td>
E
</td>
<td>
F
</td>
<td>
G
</td>
<td>
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
J
</td>
<td>
K
</td>
<td>
L
</td>
<td>
M
</td>
<td>
N
</td>
<td>
O
</td>
<td>
P
</td>
<td>
Q
</td>
<td>
R
</td>
</tr>
<tr>
<td>
S
</td>
<td>
T
</td>
<td>
U
</td>
<td>
V
</td>
<td>
W
</td>
<td>
X
</td>
<td>
Y
</td>
<td>
Z
</td>
<td>
[
</td>
<td>
</td>
</tr>
<tr>
<td>
]
</td>
<td>
^
</td>
<td>
_
</td>
<td>
`
</td>
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
<td>
d
</td>
<td>
e
</td>
<td>
f
</td>
</tr>
<tr>
<td>
g
</td>
<td>
h
</td>
<td>
i
</td>
<td>
j
</td>
<td>
k
</td>
<td>
l
</td>
<td>
m
</td>
<td>
n
</td>
<td>
o
</td>
<td>
p
</td>
</tr>
<tr>
<td>
q
</td>
<td>
r
</td>
<td>
s
</td>
<td>
t
</td>
<td>
u
</td>
<td>
v
</td>
<td>
w
</td>
<td>
x
</td>
<td>
y
</td>
<td>
z
</td>
</tr>
<tr>
<td>
{
</td>
<td>
|
</td>
<td>
}
</td>
<td>
~
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>Yajit JainPutting special characters in the title should have no adverse effect on the layout or functionality.Markup: Title *with* **Markdown**2012-01-30T00:00:00+00:002012-01-30T17:25:10+00:00https://ykjain.github.io/markup/2012/01/30/markup-title-with-markup<p>Using Markdown in the title should have no adverse effect on the layout or functionality.</p>
<p><strong><code class="language-plaintext highlighter-rouge">page.title</code> example:</strong></p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Markup:</span><span class="nv"> </span><span class="s">Title</span><span class="nv"> </span><span class="s">*with*</span><span class="nv"> </span><span class="s">**Markdown**"</span><span class="s2">"</span>
</code></pre></div></div>Yajit JainUsing Markdown in the title should have no adverse effect on the layout or functionality.Markup: Text Readability Test2012-01-29T00:00:00+00:002012-01-29T17:26:59+00:00https://ykjain.github.io/markup/2012/01/29/markup-text-readability<p>Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90’s narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney’s. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.</p>
<p>Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.</p>
<h2 id="cupidatat-90s-lo-fi-authentic-try-hard">Cupidatat 90’s lo-fi authentic try-hard</h2>
<p>In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90’s.</p>
<ul>
<li>Sartorial hoodie</li>
<li>Labore viral forage</li>
<li>Tote bag selvage</li>
<li>DIY exercitation et id ugh tumblr church-key</li>
</ul>
<p>Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.</p>
<p>Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven’t heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney’s Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.</p>
<h2 id="forage-occaecat-cardigan-qui">Forage occaecat cardigan qui</h2>
<p>Fashion axe hella gastropub lo-fi kogi 90’s aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.</p>
<blockquote>
<p>Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.</p>
</blockquote>
<p>Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney’s next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney’s sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.</p>
<h2 id="hoodie-duis">Hoodie Duis</h2>
<p>Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90’s pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.</p>
<h3 id="thundercats-ho">Thundercats Ho!</h3>
<p>Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney’s seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.</p>
<p>Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney’s selfies. Odd Future Banksy non authentic.</p>
<p>Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.</p>Yajit JainA large amount of sample text to test readability of a text heavy page.