Jekyll (first) 🧪

You don’t want a site that’s not really you. A site filled with social buttons and widgets and gadgets and analytics and tracking cookies and banner ads and pop-up ads and everything else that makes your visitors scream at you from afar. Generated anew every time someone visits your site. Every. Single. Time. - Building a blog with jekyll - [1]

caption

see also

internet distribution

# Basics ⮺

# Configuring Jekyll ⮺

# Rouge higlightning 

{% highlight cpp %}
code
{% endhighlight %}

# Youtube trick 

[![caption](https://img.youtube.com/vi/XXXvideo_idXXX/0.jpg)](https://www.youtube.com/watch?v=XXXvideo_idXXX)

# embeded video

see Adding a Video to a GitHub

{::nomarkdown}
<div class="myvideo">
   <video  style="display:block; width:100%; height:auto;" autoplay controls loop="loop">
       <source src="XXX_url_XXX.webm"  type="video/webm"  />
       <source src="XXX_url_XXX.mp4"  type="video/mp4"  />
       <source src="XXX_url_XXX.ogg"  type="video/ogg"  />
   </video>
</div>
{:/}

# site images 

![caption](/images/XXXimage.gifXXX)

see also

# external images 🖼

CSS properties can be added as html comments

![caption](XXX_url_XXX) <!-- .element height="50%" width="50% ustify-content="left" -->

For SVG:
<img src="XXX_url_XXX">

# excerp ⮺

Disable (default is first paragraph)

excerpt_separator: ""

Custom

excerpt_separator: <!--more-->

# inline SVG ⮺ 

{::nomarkdown}
<svg width="400" height=300>
    <circle cx="150" cy="100" r="10" fill="blue"/>
</svg>
{:/}

# Advanced Formating ⮺

# Link to post 🔗 

[Mean-Max]({% post_url 2017-11-27-CG-meanmax %})
[Mean-Max]({% post_url 2017-11-27-CG-meanmax %}#anchor-id)

# Citation ⮺¹ 

{::nomarkdown}
Here is some content with a citation[^1].

Another example of content[^2].

[^1]: Author Name. *Title of the Work*. Publisher, Year. URL or DOI.
[^2]: Another Author. *Another Work*. Publisher, Year. URL or DOI.
{:/}

Example:
Here is some content with a citation(1).
Another example of content(2).

see also

# favicon ⬙ 

image
<link rel="shortcut icon" href="https://crystal-lang.org/favicon.ico" type="image/x-icon" />

or for svg
<link rel="shortcut icon" href="https://pic.onlinewebfonts.com/thumbnails/icons_537547.svg" type="image/svg+xml" />

# Colored text 🔴 🟠 🟡 🟢 

<span style="color:red">[**Warning**]</span>

Alternatives is to use coloured Unicode characters, such as 🔴, U+1F534 ‘large red circle’.

🔴 red: +5V 🟠 orange: +3.3V ⚫ black: ground ⚪ white: ground (pull-down) 🟣 purple: I2C signal 🟢 green: clock signal 🟡 yellow: WS2812 signal 🔵 blue: resistor bridge (analogue) input

Or using LATEX code \({\color{red}Red}\)

# Strike throudh

There are several ways to do it:

  • <strike>strike</strike> → strike
  • <del>strike</del> → strike
  • <s>strike</s>→ strike
  • ~~strike~~ → strike
  • ~strike~- → ~strike~

# Latex Formula ⮺

add use_math: true

- $h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
- $a^2 + b^2 = c^2$
- $\sum_{i=1}^m y^{(i)}$

Example:

  • $h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
  • $a^2 + b^2 = c^2$
  • $\sum_{i=1}^m y^{(i)}$

see also

# ASCII art ⮺ 

<pre><code>
   ___
  /   \
 |     |
  \___/
</code></pre>

# text block ⮺

With wrapping

<div class="text-block">
This is a long piece of text that automatically wraps but still looks similar to a code block.
</div>

With css

.text-block {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 1em;
  font-family: monospace;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

# Directory & File structure ⮺

Use tree, then use <pre>

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

# Folding content

Summary

Detailed content goes here …

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

</code>

Summary

Detailed content goes here …

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

Notes

  • summary markdown is not rendered properly
  • code example are working though…

# Table ⮺ ᎒᎒᎒᎒

CSV Can be edited in VSCode with Edit CSV.

{::nomarkdown}
<table>
  {\% for row in site.data.amd_price_per_core %}
    {\% if forloop.first %}
    <tr>
      {\% for pair in row %}
        <th></th>
      {\% endfor %}
    </tr>
    {\% endif %}

    {\% tablerow pair in row %}
      

    {\% endtablerow %}
  {\% endfor %}
</table>
{:/}

# Table of Content (TOC) ☰

use toc: true or Include script

<script src="/assets/js/toc.js"></script>

see also 💭

  • this site for inspiration
    • following/tracking scrolled toc entry
    • side note

# Encart 🖵 

## New Way
<div class="encart orange" markdown="1">

## Old way
<div style="
  border-left: 4px solid #3498db;
  background: #eef7ff;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 6px;
"  markdown="1" >
  
Your text here

Your text here

</div>

# Theme ☀️

  • Link Color Switcher - give user Theme control
    • DarkMode 🌙 / ☀️ - The dark mode isn’t persisting across pages because CSS alone cannot save state between page loads / need minimal javascript for that. - using Javascript one can use save in local storage (also used by graph)

see also

  • Dark Mode vs. Light Mode: Which Is Better? - people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode.

# Other

# Time Stamps 📆

# Single Page theme

The easiest way would be to just define a new layout for your help.md

  • Create a copy of the layout currently used by help.md (say, page.html)
  • Rename the new layout as help.html (path: _layouts/help.html)
  • Remove markup that renders the large hero header

Use layout: help in the front matter of help.md:

---
layout: help
---

# Javascript helper

# Diagnosing on Github ⮺

Github Jekyll pages

Go to repository and look into Actions

# Traffic ? ⮺

# Rotten Link ⮺

Run locally and use Xenu’s Link Sleuth (through Wine).

# RSS ⮺

Publish on your own site, syndicate elsewhere - HN

# Running Jekyll locally ⮺

# Install 📥 

$ rbenv install 3.2.0
$ rbenv rehash
$ rbenv local 3.2.0
$ gem install jekyll bundler

$ bundle install
# if it fails 
# rm -rf vendor/bundle .bundle Gemfile.lock.text-block {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 1em;
  font-family: monospace;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
# and try again

see also

$ jekyll new myblog

And copy Gemfile* into Github blog Now you can run

$ bundle exec jekyll serve --incremental

# Online Editor

# see also

# Liquid ⮺

Jekyll uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported.

Escape Liquid tags in Jekyll using {{ “{{“ }} site.title }} trick or use raw.

inlined comment on doc side only

[//]: # ( https://jsfiddle.net/y_duf/6cz94d5e/ )

# Alternatives

see also

  1. Author Name. Title of the Work. Publisher, Year. URL or DOI. ↩

  2. Another Author. Another Work. Publisher, Year. URL or DOI. ↩

Written on March 28, 2017, Last update on August 1, 2026
jekyll blog web markdown brightness RSS