Blog Name

Table of content

Fri, 03 Aug 2018 11:07:00 +0000

Above you can see how it looks like.

To enable it add a toc variable to the front matter of your post:

layout: post
title: Table of content
date:   2018-08-03 11:07
description: For some big articles you can use table on content
toc: true           <=========== this one

You can also customize it by styling .toc class in theme.scss

This solution is based on github.com/allejo/jekyll-toc.

Some random text

Moments its musical age explain. But extremity sex now education concluded earnestly her continual. Oh furniture acuteness suspected continual ye something frankness. Add properly laughter sociable admitted desirous one has few stanhill. Opinion regular in perhaps another enjoyed no engaged he at. It conveying he continual ye suspected as necessary. Separate met packages shy for kindness.

Second level random text

Boy favourable day can introduced sentiments entreaties. Noisier carried of in warrant because. So mr plate seems cause chief widen first. Two differed husbands met screened his. Bed was form wife out ask draw. Wholly coming at we no enable. Offending sir delivered questions now new met. Acceptance she interested new boisterous day discretion celebrated.

Another second level random text

Both rest of know draw fond post as. It agreement defective to excellent. Feebly do engage of narrow. Extensive repulsive belonging depending if promotion be zealously as. Preference inquietude ask now are dispatched led appearance. Small meant in so doubt hopes. Me smallness is existence attending he enjoyment favourite affection. Delivered is to ye belonging enjoyment preferred. Astonished and acceptance men two discretion. Law education recommend did objection how old.

Third level text

How promotion excellent curiosity yet attempted happiness. Gay prosperous impression had conviction. For every delay death ask style. Me mean able my by in they. Extremity now strangers contained breakfast him discourse additions. Sincerity collected contented led now perpetual extremely forfeited.

Some more random text

Over fact all son tell this any his. No insisted confined of weddings to returned to debating rendered. Keeps order fully so do party means young. Table nay him jokes quick. In felicity up to graceful mistaken horrible consider. Abode never think to at. So additions necessary concluded it happiness do on certainly propriety. On in green taken do offer witty of.

Second level random text

Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh. On relation my so addition branched. Put hearing cottage she norland letters equally prepare too. Replied exposed savings he no viewing as up. Soon body add him hill. No father living really people estate if. Mistake do produce beloved demesne if am pursuit.

Another second level random text

Her old collecting she considered discovered. So at parties he warrant oh staying. Square new horses and put better end. Sincerity collected happiness do is contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy not early jokes.

And one more

It allowance prevailed enjoyment in it. Calling observe for who pressed raising his. Can connection instrument astonished unaffected his motionless preference. Announcing say boy precaution unaffected difficulty alteration him. Above be would at so going heard. Engaged at village at am equally proceed. Settle nay length almost ham direct extent. Agreement for listening remainder get attention law acuteness day. Now whatever surprise resolved elegance indulged own way outlived.

Table styles

Fri, 09 Feb 2018 11:07:00 +0000

Below are the examples of the default table styling.

Simple table

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Markdown

|First Header | Second Header|
|------------ | -------------|
|Content from cell 1 | Content from cell 2|
|Content in the first column | Content in the second column|

Custom styles

It is also possible to change a bit table styles by applying CSS classes. By default there are two classes available:

.wide - makes table width 100%

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Markdown - note the last line

|First Header | Second Header|
|------------ | -------------|
|Content from cell 1 | Content from cell 2|
|Content in the first column | Content in the second column|
{:.wide}

.inner-borders - shows inner borders

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Markdown - note the last line

|First Header | Second Header|
|------------ | -------------|
|Content from cell 1 | Content from cell 2|
|Content in the first column | Content in the second column|
{:.inner-borders}

You can add more such classes by putting them inside theme.scss. Here is how the above mentioned classes are defined:

table.wide {
  width: 100%;
  max-width: 100%;
}

table.inner-borders {
  border-collapse: collapse;
  border-style: hidden;
  td {
    border: 1px solid #5e5e5e;
  }
}

Few more examples from kramdown documentation:

Default aligned	Left aligned	Center aligned	Right aligned
First body part	Second cell	Third cell	fourth cell
Second line	foo	strong	baz
Third line	quux	baz	bar
Second body
2 line
Footer row

Table header row, two table bodies and a table footer row

|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
| Second line     |foo         | **strong**      | baz            |
| Third line      |quux        | baz             | bar            |
|-----------------+------------+-----------------+----------------|
| Second body     |            |                 |                |
| 2 line          |            |                 |                |
|=================+============+=================+================|
| Footer row      |            |                 |                |
|-----------------+------------+-----------------+----------------|

Default aligned	Left aligned	Center aligned	Right aligned
First body part	Second cell	Third cell	fourth cell
Second line	foo	strong	baz
Third line	quux	baz	bar
Second body
2 line
Footer row

Same as above but shorter

|---
| Default aligned | Left aligned | Center aligned | Right aligned
|-|:-|:-:|-:
| First body part | Second cell | Third cell | fourth cell
| Second line |foo | **strong** | baz
| Third line |quux | baz | bar
|---
| Second body
| 2 line
|===
| Footer row

Jekyll Dark Clean Theme

Thu, 01 Dec 2016 16:25:06 +0000

Here is a sample post for Jekyll-Clean-Dark theme.

get it from github
see the live demo
see it in action on my blog

This theme was created on top of Jekyll Clean theme by Scotte.

This theme uses some parts of Twitter Bootstrap, which allows it looks nice on a mobile devices using a collapsable nav bar and hiding the sidebar.

Here how it looks like on some portable devices:

iPhone 5 portrait

iPhone 5 landscape

iPad mini portrait

iPad mini landscape

Text formatting

Wed, 02 Nov 2016 16:25:06 +0000

Text formatting example

Some examples of text formatting for some common text elements.

Headers

Header1

Header2

Header3

Header4

Emphasis

Italics: *asterisks* -> asterisks or _underscores_ -> underscores.

Bold: **asterisks** -> asterisks or __underscores__ -> underscores.

You also can combine them: **asterisks and _underscores_** -> asterisks and underscores.

Blockquotes and notes

>Blockquotes

Blockquotes

Using very cool feature of kramdown which allows to assign any attribute to a block-level element I’ve added note and warning:

>Note 
{: .note}

Note

>Warning 
{: .note .warning}

Warning

Keyboard buttons

In case you need to show some keyboard shortcuts, like Ctrl+A use following construction:

`Ctrl`{: .key}+`A`{:.key}

Example of keyboard shortcuts in a terminal:

Ctrl + A = move cursor to beginning of line
Ctrl + E = move cursor to end of line
Ctrl + C = kills the current process.
Ctrl + Z = sends the current process to the background.
Ctrl + D = logs you out.
Ctrl + R = finds the last command matching the entered letters.

Code snippets

Sat, 01 Oct 2016 16:25:06 +0000

Introduction

For code syntax coloration I’m using Darcula theme from Intellij IDEA, which I’ve found in this post Darcula theme for Pygments.

XML with line numbers (linenos flag), {% highlight xml linenos %}:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ site.name }}</title>
    <description>{{ site.description }}</description>
    <link>{{site.baseurl | prepend:site.url}}</link>
    <atom:link href="{{site.baseurl | prepend:site.url}}/feed.xml" rel="self" type="application/rss+xml" />
    {% for post in site.posts limit:10 %}
      <item>
        <title>{{ post.title }}</title>
        <description>{{ post.content | xml_escape }}</description>
        <pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>
        <link>{{post.url | prepend:site.baseurl | prepend:site.url}}</link>
        <guid isPermaLink="true">{{post.url | prepend:site.baseurl | prepend:site.url}}</guid>
      </item>
    {% endfor %}
  </channel>
</rss>

JSON

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

SQL

select count(*) as cm_content_nodes
from alf_node nd, alf_qname qn, alf_namespace ns
where qn.ns_id = ns.id
  and nd.type_qname_id = qn.id
  and ns.uri = 'http://www.alfresco.org/model/content/1.0'
  and qn.local_name = 'content';

Java

private String getToken(HttpClient client) throws UnsupportedEncodingException{
  Cookie[] cookies = client.getState().getCookies();
  for (Cookie cookie : cookies){
    if (cookie.getName().equals("Alfresco-CSRFToken")){
      return URLDecoder.decode(cookie.getValue(), "UTF-8");
    }
  }
  return null;
}

To add name to the code snippet, as in the examples above, add following construction before the snippet:

>Java
{:.filename}
{% highlight java %}
...

Customizations

Tue, 20 Sep 2016 16:25:06 +0000

Accent color

Accent color is color for some important elements, such as links, buttons, icons. Currently accent color is . This theme has some more predefined colors available in theme.scss:

theme.scss

// Several accent colors, choose one or create your own!
$accent-color: #3CA2A2;     // original =)
// $accent-color: #C38FD6;   velvet
// $accent-color: #8FD6B3;   greenish
// $accent-color: #35B4DE;   bluish
// $accent-color: #D2E354;   yellowish
// $accent-color: #52B54B;   green

You can use one of them (just click the button below to see accent color in action) or define your own!

, , , , .

Other colors

As Jekyll comes with support of SASS I put colors in variables. Here are the ones which could be easily changed:

theme.scss

$font-color: #dddddd;
$background-color: #292929;
$post-panel-color: #444;
$footer-background-color: #292c2f;
$note-color: #87CEFA;
$warning-color: #ffff00;

Background

It is also possible to change the background pattern and color. This theme comes with few patterns pre-installed – you can check them by clicking on the images below. Or check the transparenttextures.com – it has tons of different patterns for background.

To change the color go to the theme.scss and change the background-pattern variable to the name of the pattern image file. To use custom pattern, download it from transparenttextures.com and place it under css/pics/background/.

theme.scss

// use this or pick any from /css/pics/background folder or from transparenttextures.com
$background-pattern: 'random-grey-variations.png';

Be social

Thu, 15 Sep 2016 16:25:06 +0000

You can have social icons which could lead to your social profile.
Out-of-the box it has:

They could be setup in _config.yml.

To add more icons do following steps:

choose an icon you want to use: Font Awesome Icons
add variable in _config.yml
add icon in social.html with check if variable exists:

{% if site.social.rss %}
  <li>
    <a title="{{ site.social.<your_social_variable> }}" 
       href="{{site.url}}/{{ site.social.<your_social_variable> }}" 
       target="_blank"><font_awesome_icon></i></a>
  </li>
{% endif %}

This theme comes with built-in share buttons. You can see them in the bottom of this post.
To turn them on in the header of your post add:

layout: post
title: "Be sociable"
date: 2016-05-15 16:25:06
description: Built-in share buttons!
share: true <-- here

If you want to disable some of them - go to _config.yml:

_config.yml

share:
  facebook: true
  twitter: true
  gplus: true
  linkedin: true
  pinterest: true
  email: true

To add new buttons:

add icon name in _config.yml;
add section in _includes/share.html;
add styles in css/theme.css.

Analytics, tags and comments

Mon, 01 Aug 2016 16:25:06 +0000

Analytics

Google Analytics

To enable Google Analytics create an account here. Then add your tracking id in config.xml, it should look something like UA-********-1

Yandex Metrica

To enable Yandex Metrica you need to register, create a ‘counter’ and then copy-paste it’s code in /_includes/yandex-metrica.html file.

Comments

To enable Disqus register on the site and then just put your name in _config.xml. Comments could be switched on and off on per post basis, just put comments: true to enable them.

Images

Fri, 01 Jul 2016 16:25:06 +0000

Introduction

This theme supports two types of images:

inline images:

![Battery Widget]({{ '/assets/images/batWid1.png' | relative_url }})

centered images with caption (optional):

(°0°)

![img]({{ '/assets/images/deer.jpg' | relative_url }}){: .center-image }*(°0°)*

You can apply your own styles to image by creating css class with style:

.custom-image-style
{
/* your style */
}

And then applying your style just after the image in curly brackets with colon:

[!image](path to image){:.custom-image-style}

Installation

Sun, 01 Nov 2015 16:25:06 +0000

Installation

If you dont’t have your own blog you can clone this repository and put your articles in a _posts folder.
If you already have your own blog then I think you can clone this repository and copy-paste content keeping your _posts folder.

After you will have to set up your _config.yml

License

The content of this theme is distributed and licensed under a Creative Commons Attribution 4.0 License

This license lets others distribute, remix, tweak, and build upon your work,
even commercially, as long as they credit you for the original creation. This
is the most accommodating of licenses offered. Recommended for maximum
dissemination and use of licensed materials.

In other words: you can do anything you want with this theme on any site, just please
provide a link to the original theme on github.

This theme includes the following files which are the properties of their
respective owners:

js/bootstrap.min.js - bootstrap
css/bootstrap.min.css - bootstrap
js/jquery.min.js - jquery

Blog Name

Table of content

Some random text

Second level random text

Another second level random text

Third level text

Some more random text

Second level random text

Another second level random text

And one more

Table styles

Simple table

Custom styles

Few more examples from kramdown documentation:

Jekyll Dark Clean Theme

Text formatting

Text formatting example

Headers

Header1

Header2

Header3

Header4

Emphasis

Blockquotes and notes

Keyboard buttons

Code snippets

Introduction

Customizations

Accent color

Other colors

Background

Be social

Social icons

Share buttons

Analytics, tags and comments

Analytics

Google Analytics

Yandex Metrica

Tags

Comments

Images

Introduction

Installation

Installation

License