Code snippets

Insert TOC

1
2
3
4
__Table of Contents__

* TOC (numbered)
{:toc}

Insert an image

1
2
3
4
{% include image.html 
   file="/images/blog/lcz/1.jpg"
   title="Figure 1"
   caption="Import screen: File selection." %}

List relevant posts by a tag

1
{% include list-relevant-posts.html tag="SSQ20 CHE 139" %}

Standard menu buttons

Internal links:

1
<a class="button button--outline-success button--pill button--xs" href="/help">Help</a>

External links:

1
<a class="button button--outline-primary button--pill button--xs" href="/help">Help</a>

Embed a PDF file

1
{% include pdf.html pdf_file="/path/to/1.pdf" %}

Embed a slider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style>
  .swiper-demo {
    height: 150px;
  }
  .swiper-demo .swiper__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    a:link
  }
  .swiper-demo .swiper__slide:nth-child(even) {
    background-color: #008000;
  }
  .swiper-demo .swiper__slide:nth-child(odd) {
    background-color: #8A2BE2;
  }
  .swiper-demo--dark .swiper__slide:nth-child(even) {
    background-color: #312;
  }
  .swiper-demo--dark .swiper__slide:nth-child(odd) {
    background-color: #123;
  }
  .swiper-demo--image .swiper__slide:nth-child(n) {
    background-color: #000;
  }
</style>

<div class="swiper my-3 swiper-demo swiper-demo--0">
  <div class="swiper__wrapper">
    <div class="swiper__slide"><a style="color: white;" href="/nzx">Raoult's Law <br />Experiment 1</a></div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>

<script>
  {%- include scripts/lib/swiper.js -%}
  var SOURCES = window.TEXT_VARIABLES.sources;
  window.Lazyload.js(SOURCES.jquery, function() {
    $('.swiper-demo--0').swiper();
    $('.swiper-demo--1').swiper();
    $('.swiper-demo--2').swiper();
    $('.swiper-demo--3').swiper();
    $('.swiper-demo--4').swiper({ animation: false });
  });
</script>