Editing Cheat Sheet

Image/Figure

Video

<figure>
<video controls>
    <source src="{{site.url}}/media/2019/2019-08-22-pyopengl-2.mp4" type="video/mp4">
</video>
<figcaption>Video capture of the demo</figcaption>
</figure>

Algorithm

Supported by pseudocode.js.

<pre id="alg-1" style="display:none;">
\begin{algorithm}
\begin{algorithmic}
\REQUIRE{$D_t$: the set of training records that reaches a node $t$}
\PROCEDURE{Hunts}{$D_t$}

  \IF{$D_t$ only contains records of the same class $y_t$}
    \STATE $t$ is a leaf node labeled as $y_t$
  \ELSEIF{$D_t$ contains records of more than one class}
    \STATE split the data into smaller subsets based on \textit{atrribute test}
    \STATE recursive apply \CALL{Hunts}{} to the subsets
  \ELSE
     \STATE label $t$ by the default class $y_d$ \COMMENT{$D_t$ is an empty set}
  \ENDIF

\ENDPROCEDURE
\end{algorithmic}
\caption{Hunt's Algorithm}
\end{algorithm}
</pre>

<div id="alg-div-1"></div>

<script>
var code = document.getElementById("alg-1").textContent;
var parentEl = document.getElementById("alg-div-1");
var options = {
    lineNumber: true
};
pseudocode.render(code, parentEl, options);
</script>

Color Boxes

<div class="block-base e-block">
<div id="title" class="block-title-base">Distance measure in high dimensional space</div>
<div markdown="1" class="block-content-base">
It can be seen that as $$n$$ increases, the value of $$\gamma$$ increases slightly.
</div>
</div>

Fact blocks

One row:

<div class="fact-block-b" markdown="1">

</div>

Two rows:

<div class="fact-block-c" markdown="1">
<div class="fact-block-content" markdown="1">

</div>
<div class="fact-block-c-inner" markdown="1">
<div class="fact-block-content" markdown="1">

</div>
</div>
</div>

Spoiler boxes

<div class="spoiler-div-bottom" >
<div class="spoiler-div-inner-top">
Hover to show text.
</div>
<div class="spoiler-div-inner-content" markdown="1">
Inner text.
</div>
</div>

Index

Supported by my own Jekyll plugin.

Embedding Jupyter Notebooks

Manual MathJax Equation

<script type="math/tex; mode=inline">  </script>

Highlight code span

`struct module *owner`{:.language-c.highlight}

Has image:

<div class="div-link-preview">
    <div class="div-link-preview-col div-link-preview-col-l">
        <img class="div-link-preview-img" src="">
    </div>
    <div class="div-link-preview-col div-link-preview-col-r">
        <div style="display: block; height: 100%; padding-left: 10px;">
            <div class="div-link-preview-title"><a href="https://lwn.net/Articles/625077/">The iov_iter interface [LWN.net]</a></div>
            <div class="div-link-preview-content">

            </div>
            <div class="div-link-preview-domain">
            <span style="font-size: 80%;">&#x1F4C5;</span>&nbsp;Apr 9, 2020
            <span style="font-size: 80%; margin-left: 20px;">&#x1F517;</span>&nbsp;lwn.net</div>
        </div>
    </div>
</div>

No image:

<div class="div-link-preview">
    <div class="div-link-preview-col div-link-preview-col-l">
        <div class="div-link-preview-img-txt">NO<br/>IMG</div>
    </div>
    <div class="div-link-preview-col div-link-preview-col-r">
        <div style="display: block; height: 100%; padding-left: 10px;">
            <div class="div-link-preview-title"><a href="https://www.kernel.org/doc/Documentation/filesystems/vfs.txt">Overview of the Linux Virtual File System</a></div>
            <div class="div-link-preview-content">
            The Virtual File System (also known as the Virtual Filesystem Switch)
is the software layer in the kernel that provides the filesystem
interface to userspace programs. It also provides an abstraction
within the kernel which allows different filesystem implementations to
coexist.
            </div>
            <div class="div-link-preview-domain">
            <span style="font-size: 80%;">&#x1F4C5;</span>&nbsp;Apr 9, 2020
            <span style="font-size: 80%; margin-left: 20px;">&#x1F517;</span>&nbsp;kernel.org</div>
        </div>
    </div>
</div>

Include media files in page

Supported by include-absolute plugin.

{% include_absolute  '/media/2020/utility.jl' %}

YAML Flags

Referring posts/pages