✨ Feat: add codepen shortcode and replace raw html in previous posts.

Author: bambooom

content/posts/2016-07-25-jquery-f.md

@@ -21,8 +21,7 @@ isCJKLanguage: true
    本来觉得 jsFiddle 长得比较小清新, 更好看些, 可是实际用下来竟然觉得 CodePen 更好用. 主要两个地方不爽jsFiddle, 一是经常很卡打开很慢, 二是添加 external resources 的时候竟然要求一定要 CDN 的. 另外 CodePen 有个可以自由选取预处理器的功能比jsFiddle也方便一些. 抽时间做个自己的 CodePen theme*
 
 
- <p data-height="606" data-theme-id="0" data-slug-hash="zBjLwQ" data-default-tab="js,result" data-user="bambooom" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/bambooom/pen/zBjLwQ/">zBjLwQ</a> by bamboo (<a href="http://codepen.io/bambooom">@bambooom</a>) on <a href="http://codepen.io">CodePen</a>.</p>
-<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+{{< codepen bambooom zBjLwQ >}}
 
 
 ## stuck in radio....?!

content/posts/2018-04-11-elementfrompoint-text-element.md

@@ -9,10 +9,7 @@ isCJKLanguage: true
 
 捉 bug 记录一个 case
 
-
-<p data-height="300" data-theme-id="33133" data-slug-hash="aYMYpE" data-default-tab="result" data-user="bambooom" data-embed-version="2" data-pen-title="elementFromPoint with text element" class="codepen">See the Pen <a href="https://codepen.io/bambooom/pen/aYMYpE/">elementFromPoint with text element</a> by bamboo (<a href="https://codepen.io/bambooom">@bambooom</a>) on <a href="https://codepen.io">CodePen</a>.</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
+{{< codepen bambooom aYMYpE >}}
 
 ## Question
 

themes/PaperMod/layouts/shortcodes/codepen.html

@@ -0,0 +1,42 @@
+{{/* CodePen shortcode. */}}
+{{/* Parameters   : */}}
+{{/* - user (#0)  : the user ID. */}}
+{{/* - id (#1)    : the code ID (hash). */}}
+{{/* - theme      : light or dark. */}}
+{{/* - defaultTabs: default tabs separated by comma, html, js, css and result, default to "html,result". */}}
+{{/* - height     : frame height, default to 300. */}}
+{{- $user := "" }}
+{{- $id := "" }}
+{{- $theme := "" }}
+{{- $defaultTabs := "html,result" }}
+{{- $height := 300 }}
+{{- if .IsNamedParams }}
+  {{- $user = .Get "user" }}
+  {{- $id = .Get "id" }}
+  {{- with .Get "theme" }}{{ $theme = . }}{{ end }}
+  {{- with .Get "defaultTabs" }}{{ $defaultTabs = . }}{{ end }}
+  {{- with .Get "height" }}{{ $height = . }}{{ end }}
+{{- else }}
+  {{- $user = .Get 0 }}
+  {{- $id = .Get 1 }}
+{{- end }}
+{{- $src := printf
+  "https://codepen.io/%s/embed/%s?default-tab=%s"
+  $user
+  $id
+  $defaultTabs
+}}
+{{- with $theme }}
+  {{- $src = printf "%s&theme-id=%s" $src . }}
+{{- end }}
+<iframe
+  width="100%"
+  height="{{ $height }}"
+  style="width: 100%;"
+  title="Hello World!"
+  src="{{ $src }}"
+  frameborder="no"
+  loading="lazy"
+  allowtransparency="true"
+  allowfullscreen="true">
+</iframe>