Editing Cheat Sheet

10 Dec 2019

Image/Figure
Video
Algorithm
Color Boxes
Fact blocks
Spoiler boxes
Index
Embedding Jupyter Notebooks
Manual MathJax Equation
Highlight code span
Link preview template
Include media files in page
YAML Flags
Referring posts/pages

Image/Figure

Using HTML (supports caption)

<figure>
  <img class="resize-sixty" src="{{site.url}}/media/2019/2019-08-20-pyopengl-1.png"/>
  <figcaption>Output of the demo</figcaption>
</figure>

Using markdown (a feature supported by Kramdown)

![some image]({{site.url}}/media/2019/2019-08-20-pyopengl-1.png){: .resize-fifty}

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.

Normal index term
```
%{dataset}%
```
Use more than one % to escape this syntax.
```
%%{dataset}%
```
Index term with an alias
```
%{Nominal @ nominal(attribute)}%
```
Use \@ to escape @.
Cross referencing an index term (this gets the hashed key of the term, the key is not case sensitive)
```
%{#get_link nominal(attribute)}%
```
Setting up a link to the item:
```
<a href="%{#get_link nominal(attribute)}%">some link</a>
```

Embedding Jupyter Notebooks

Save the notebook file to HTML
Clean all CSS styles in the output

Include notebook CSS in the header

<link rel="stylesheet" href="/assets/css/nb-style.css">

Use an iframe to include the notebook html in the page

<!--with scroll bar-->
<iframe class="nb-iframe" src="/media/2019/julia-nb-1.html"></iframe>

<!--without scroll bar-->
<iframe class="nb-iframe-noscroll"
        frameborder="0"
        scrolling="no"
        onload="resizeIframe(this)"
        src="/media/2019/julia-nb-2.html"></iframe>

Manual MathJax Equation

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

Highlight code span

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

Link preview template

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

Hide from post directory: hidden: true
Hide from index page: notinhome: true or hidefromindex: true

Referring posts/pages

Refer to posts:

  {% post_url 2020/2020-05-25-latex-3 %}

Refer to pages: use permalink

Alan Xiang's Blog