update demo posts

content/post/2019-08-08-text-and-typography/index.md

@@ -10,6 +10,7 @@ categories:
 tags:
   - typography
 pin: true
+math: true
 image:
   path: devices-mockup.png
   lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
@@ -105,7 +106,7 @@ This is an example of `Inline Code`.
 
 ## Filepath
 
-Here is the `/path/to/the/file.extend`{: .filepath}.
+Here is the {{< markdown/filepath src="/path/to/the/file.extend" >}}.
 
 ## Code blocks
 
@@ -190,7 +191,7 @@ The image below will toggle dark/light mode based on theme preference, notice it
 
 ## Video
 
-{{< youtube id="Balreaj8Yqs" >}}
+{{< embed/youtube id="Balreaj8Yqs" >}}
 
 ## Reverse Footnote
 

content/post/2019-08-11-customize-the-favicon/index.md

@@ -24,10 +24,10 @@ In the next step, the webpage will show all usage scenarios. You can keep the de
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
-- `browserconfig.xml`{: .filepath}
-- `site.webmanifest`{: .filepath}
+- {{< markdown/filepath src="browserconfig.xml" >}}
+- {{< markdown/filepath src="site.webmanifest" >}}
 
-And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
+And then copy the remaining image files ({{< markdown/filepath src=".PNG" >}} and {{< markdown/filepath src=".ICO" >}}) to cover the original files in the directory {{< markdown/filepath src="assets/img/favicons/" >}} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
 
 The following table will help you understand the changes to the favicon files:
 
@@ -38,6 +38,6 @@ The following table will help you understand the changes to the favicon files:
 
 <!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.
-{: .prompt-info }
+{.prompt-info }
 
 The next time you build the site, the favicon will be replaced with a customized edition.