• Using HTML (supports caption)

      <img class="resize-sixty" src="{{site.url}}/media/2019/2019-08-20-pyopengl-1.png"/>
      <figcaption>Output of the demo</figcaption>
  • Using markdown (a feature supported by Kramdown)

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


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


Supported by pseudocode.js.

<pre id="alg-1" style="display:none;">
\REQUIRE{$D_t$: the set of training records that reaches a node $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
     \STATE label $t$ by the default class $y_d$ \COMMENT{$D_t$ is an empty set}

\caption{Hunt's Algorithm}

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

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

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.

Fact blocks

One row:

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


Two rows:

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

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



Supported by my own Jekyll plugin.

  • Normal index term

  • 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"

Manual MathJax Equation

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