Escape syntax

Liquid: {% raw %} {% endraw %}

Inside Markdown: use two backtik => `` ```

HTML special chars

• { => {
• } => }

Comment

Hack from: https://stackoverflow.com/a/20885980/4802664

[//]: # (--------------------- Foo --------------------------------------------------------------------------------------------------------------------------------------)

[//]: # (--------------------- END: Foo --------------------------------------------------------------------------------------------------------------------------------------)

Details block

Syntax for details block

<details><summary markdown="span">Title here</summary>

</details>

To parse code inside details block, enable parse_block_html: true in _config.yml

kramdown:
  # Use GitHub flavored markdown, including triple backtick fenced code blocks
  input: GFM
  parse_block_html: true

Code in details block

<details><summary markdown="span">Queue to List</summary>
`` ```
// code goes here
// ... ... ...
`` ```
</details>

Using onedrive image

Create yaml data file in _data with same name of page variable (in my case it’s topic-slug)

_data/sql-server.yml

storedProcedure:
  creatingStoredProcedure:
    imageMeta: Creating stored procedure in ssms
    imageLinks:
      - ...
      - ...

Page front matter

---
layout: topic
title: Stored Procedure
description:
author:
lang:
topic: SQL Server
topic-slug: sql-server
topic-slug-id: ""
data-key: storedProcedure
isTopicIndex: false
toc: true
---

Note: pageDataDict is assigned at top : {% assign pageDataDict = site.data[page.topic-slug][page.data-key] %}

Rendering images

{% if pageDataDict["creatingStoredProcedure"] %}

{% assign creatingStoredProcedureData = pageDataDict["creatingStoredProcedure"] %}
{% assign imageAltPrefix =  creatingStoredProcedureData["imageMeta"] %}

{% if creatingStoredProcedureData["imageLinks"] %}

{% for imageLink in creatingStoredProcedureData["imageLinks"] %}

{% capture imageAlt %}{{ imageAltPrefix }} step {{ forloop.index }}{% endcapture %}

<img src ="{{ imageLink }}" alt ="{{ imageAlt }}"  width = "98%"/>

{% endfor %}

{% endif %}

{% endif %}

Note: indentation in liquid syntax might cause problem

Using google drive image

Normal markdown : ![image title](https://drive.google.com/uc?export=view&id=image-id-from-share-link)

In Jekyll create a site variable in _config.yml

... ... ...

cdn-img: https://drive.google.com/uc?export=view&id=

... ... ...

Then use liquid tag to generate url in markdown using that site variable

![image title]({{ site.cdn-img | append: "image-id-from-share-link" }})

![C# vs Java - 10 years challenge]({{ site.cdn-img | append: "11n9_gREb6464Vl1KH75Ij_prQlcZB" }})

Adding css to table

{:.table .table-striped .table-bordered}
|   X  |        A  |                 B  |         C  |
|-----:|:---------:|:------------------:|:----------:|
| 1 | 2 | 3 | 4 |