Added syntax highlight in code snippets of documentation posts
This commit is contained in:
Panos Sakkos
parent
c9efc1f0aa
commit
91e1cbe851
8 changed files with 38 additions and 38 deletions
|
|
@ -8,10 +8,10 @@ tags: [ 'tutorial' ]
|
|||
|
||||
You can change the text from the 404.html file and set the image from the _config.yml:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
############
|
||||
# 404 page #
|
||||
############
|
||||
|
||||
404-img: "/img/labtocat.png"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ tags: [ 'tutorial' ]
|
|||
Social buttons (rendered in the footer) are great for having a small hub with all your social footprint.
|
||||
In order to change them, jump to \_config.yml and edit the social list:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
social:
|
||||
- title: "github"
|
||||
url: "https://github.com/"
|
||||
|
|
@ -19,7 +19,7 @@ social:
|
|||
url: "http://youtube.com/"
|
||||
- title: "rss"
|
||||
url: "/feed.xml"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The titles of the social link are used to find the icon in Font Awesome.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ the form of a timeline of photos, dates and text descriptions. Let's see how it
|
|||
|
||||
Open the \_config.yml and find the events list definition, it should look like this:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
events:
|
||||
- image: "/img/career/spidertocat.png"
|
||||
date: "September 2013 - Today"
|
||||
|
|
@ -18,7 +18,7 @@ events:
|
|||
- image: "/img/career/baracktocat.jpg"
|
||||
date: "September 2007 - August 2013"
|
||||
description: "Started coding"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
For each event of your life, add a tuple of image, date and description to the events, and the timeline will be automatically generated!
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ tags: [ 'tutorial' ]
|
|||
|
||||
Run the ./scripts/newpost script with the file name of the post as an argument:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight bash linenos %}
|
||||
cd <your { Personal } repo>
|
||||
./scripts/newpost hello-world
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
A a new post template with name YYYY-MM-DD-hello-world.md will be created under ./\_posts, with the current date.
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ post, with publication date <i>YYYY-MM-DD</i>.
|
|||
|
||||
The content starts with:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
|
|
@ -33,7 +33,7 @@ title: Title
|
|||
category: Category
|
||||
tags: [ 'tag1', 'tag2' ]
|
||||
---
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The *layout* and *section-type* are used by the theme.
|
||||
|
||||
|
|
@ -48,9 +48,9 @@ As a result we have to create the tag pages before building and publishing the s
|
|||
|
||||
In order to generate the tag pages, simply run the *generate-tags* script from the repo's root directory:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight bash linenos %}
|
||||
./scripts/generate-tags
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The script will parse all your posts, and generate the tag pages for the newly added tags.
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ A website is truly personal if it's your blog as well, this place of the interne
|
|||
|
||||
First of all, you get a preview of the latest post in the index, in order to attract the visitor to visit your blog. The size of this preview is defined by:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
post-preview-words: 96
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
Feel free to experiment with different sizes, and pick the best for you.
|
||||
|
||||
|
|
@ -24,9 +24,9 @@ A blog is expected to host many posts, so you will need an archive with paginati
|
|||
which in a nutshell it's a grouping of your posts in pages, in reverse chronological
|
||||
order. You can define the number of posts that are displayed per page by changing:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
paginate: 5
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
Note that you can navigate the pages of the Archive by swiping left/right!
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ Note that you can navigate the pages of the Archive by swiping left/right!
|
|||
|
||||
Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest, VKontakte share buttons are available which can be enabled or disabled by setting the following:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
fb-share: True
|
||||
twitter-share: True
|
||||
reddit-share: True
|
||||
|
|
@ -42,12 +42,12 @@ google-plus-share: True
|
|||
linkedin-share: True
|
||||
pinterest-share: True
|
||||
vkontakte-share: True
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
### Comments
|
||||
|
||||
And you can enable <a href="http://www.disqus.com" target="\_blank">Disqus</a> comments by just setting your Disqus username here:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
disqus-shortname: "YOUR DISQUS USERNAME"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ You can make your website behave like a native web app in
|
|||
devices by setting the web-app-mode variable to True and providing links for the
|
||||
icons for each resolution:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
web-app-mode: True
|
||||
|
||||
# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
|
||||
|
|
@ -20,7 +20,7 @@ icon-72p: "/img/web-app/icon-72p.png"
|
|||
icon-96p: "/img/web-app/icon-96p.png"
|
||||
icon-144p: "/img/web-app/icon-144p.png"
|
||||
icon-192p: "/img/web-app/icon-192p.png"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
This is how the website will look when added to the homescreen:
|
||||
|
||||
|
|
|
|||
|
|
@ -21,32 +21,32 @@ If you want to disable the dynamic typing, set the site.dynamic-typing to false
|
|||
|
||||
You can add your desired dynamically typed text in the lines list:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
##############################
|
||||
# Dynamic Text on the header #
|
||||
##############################
|
||||
|
||||
dynamic-typing: True
|
||||
shuffle: True # Shuffle the lines.
|
||||
shuffle: True # Shuffle the lines.
|
||||
loop: True
|
||||
loop-count: False # Set False for infinite loop, or set any number for finite loop.
|
||||
type-speed: 10 # Default 10
|
||||
start-delay: 200 # Default 200
|
||||
delete-delay: 5000 # Default 5000
|
||||
lines: # You can add HTML Tags in the Text
|
||||
loop-count: False # Set False for infinite loop, or set any number for finite loop.
|
||||
type-speed: 10 # Default 10
|
||||
start-delay: 200 # Default 200
|
||||
delete-delay: 5000 # Default 5000
|
||||
lines: # You can add HTML Tags in the Text
|
||||
- text: "The lower you fall, the higher you'll fly."
|
||||
- text: "Where’s your will to be weird?"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
|
||||
|
||||
In order to set the background and your image, modify the following variables in \_config:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
black-favicon: "/img/black-lab-glass.ico"
|
||||
background-img: "../img/intro-bg.jpg"
|
||||
me-img: "/img/jetpacktocat.png"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The black favicon is an image on the left of the navigation bar.
|
||||
Preferably it should be a black and white version of your favicon.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ tags: [ 'tutorial' ]
|
|||
|
||||
In the \_config.yml, find and set the variables of the Head section:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
#############
|
||||
# HTML Head #
|
||||
#############
|
||||
|
|
@ -19,16 +19,16 @@ title: "{ John Smith }"
|
|||
favicon: "/img/favicon.ico"
|
||||
description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
|
||||
keywords: "smith, jones, personal, Jekyll, theme"
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The values that you set, will be placed in the head section of every generated HTML page.
|
||||
|
||||
Don't forget to set the configurations for your site's url and Google tracking id:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight yaml linenos %}
|
||||
url: "http://panossakkos.github.io/personal-jekyll-theme/"
|
||||
google-tracking-id: ""
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
The url is essential to be set, because it's used in many places across the theme.
|
||||
|
||||
|
|
@ -39,8 +39,8 @@ If you are using *{ Personal }* as a Github repository theme, set the repository
|
|||
This step is essential, since its related to file paths!
|
||||
In order to serve the website locally just run:
|
||||
|
||||
<pre style="text-align: left">
|
||||
{% highlight bash linenos %}
|
||||
./scripts/serve
|
||||
</pre>
|
||||
{% endhighlight %}
|
||||
|
||||
<small>Many thanks to <a href="https://github.com/joariasl" target="\_blank">@joariasl</a> for the language support! </small>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue