Alt-F4 #X Title of this post

Written by Names of who wrote this post [optional, recommended], edited by Names of who edited this post [optional], translated by Names of who translated this post [optional] on 2020-08-20

Table of Contents

Welcome to this sample post, here we breafly describe how to use some advanced features of out templating configuration.

Using Diagrams: Mermaid

You can create diagrams using Mermaid js. Please take look at full documentation for more details

But here are some examples

You can use following code to create pichart

```mermaid !
pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10
```

Or this code to create flow diagram

```mermaid !
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

```

You can preview your diagrams here

Using Media

You can use media by just importing it in a regular markdown fascion

  1. Imgur
    • Use ![](https://i.imgur.com/WsUV4DK.gif) or <img id="image-element" class="post" src="//i.imgur.com/WsUV4DK.gif">
    • where id is last part of Imgur URL https://imgur.com/gallery/WsUV4DK
  2. YouTube
    • ![](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
  3. Dailymotion
    • ![](https://www.dailymotion.com/video/x7tfyq3) or ![](https://dai.ly/x7tfyq3)
  4. Vimeo
    • ![](https://vimeo.com/263856289)
  5. Spotify
    • ![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)
  6. SoundCloud
    • ![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)
  7. General Audio
    • ![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)
  8. Embeding a countdown

    let daysEl = document.querySelector(‘#countdown-2021-01-01 #days’); //document.getElementById(‘days’); let hoursEl = document.querySelector(‘#countdown-2021-01-01 #hours’); //document.getElementById(‘hours’); let minutesEl = document.querySelector(‘#countdown-2021-01-01 #minutes’); //document.getElementById(‘minutes’); let secondsEl = document.querySelector(‘#countdown-2021-01-01 #seconds’); //document.getElementById(‘seconds’);

    let allEl = [daysEl, hoursEl, minutesEl, secondsEl];

    let countdownDate = new Date(Date.UTC(…(‘2021:01:01’.split(‘:’).map((x, i) => parseInt(x) + (i === 1 ? -1 : 0))))); console.log(countdownDate);

    let interval = setInterval(updateCountdown, 1000);

    function updateCountdown() { let distance = countdownDate - Date.now();

    if (distance < 0) { allEl.forEach((x) => { x.textContent = ‘’; }); countdownEl.classList.add(‘past’);

     clearInterval(interval);
    
     return;    }
    

    daysEl.textContent = Math.floor(distance / (1000 * 60 * 60 * 24)).toString().padStart(2, ‘0’); hoursEl.textContent = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, ‘0’); minutesEl.textContent = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, ‘0’); secondsEl.textContent = Math.floor((distance % (1000 * 60)) / 1000).toString().padStart(2, ‘0’); }

    updateCountdown(); </script>

</p>

  • Where date is the date in year:month:day:hour:minutes:seconds, UTC

Using Math: MathJax Dr.MagPie

You can use MathJax to describe mathematical equasions and formulas. You can find full specification in MathJax Documentation but here are come samples

This code sample $ a * b = c ^ b $ will transform into thes formula

$ a * b = c ^ b $

You can go full in and make some like this

$$
\begin{aligned}
  & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
  = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \
  & (x_1, \ldots, x_n) \left( \begin{array}{ccc}
      \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \
      \vdots & \ddots & \vdots \
      \phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
    \end{array} \right)
  \left( \begin{array}{c}
      y_1 \
      \vdots \
      y_n
    \end{array} \right)
\end{aligned}
$$

Which will look like this

\[\begin{aligned} & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\ & (x_1, \ldots, x_n) \left( \begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array} \right) \left( \begin{array}{c} y_1 \\ \vdots \\ y_n \end{array} \right) \end{aligned}\]

You can preview your formulas here

Compare Images