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>

Index

Supported by my own Jekyll plugin.

  • Normal index term

    %{dataset}%
    
  • Index term with an alias

    %{Nominal @ nominal(attribute)}%
    
  • Cross referencing an index term (this gets the hashed key of the term)

    %{#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>