hexo 플러그인 hexo-codepen-v2

codepen 으로 작성한게 있는데,
이걸 hexo 에 올려주는(?) 플러그인(hexo-codepen-v2)이 있어 설치를 해보았다.

blog 폴더로 이동해서,

설치(install)

npm install hexo-codepen-v2 --save

사용법(Usage)

{% codepen slugHash default_tabs height width userId|anonymous|anon theme %}

CodePen 삽입 코드에서 인수를 얻는 방법

이 코드는 CodePen에서 생성된 것.

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="njean" data-slug-hash="xBKjZE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="select local">
  <span>See the Pen <a href="https://codepen.io/njean/pen/xBKjZE/">
  select local</a> by Choi Sunki (<a href="https://codepen.io/njean">@njean</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

구분	값
userId	njean
slugHash	xBKjZE
theme	0
default_tabs	result
height	265
width	이 값은 블로그 테마에 따라 조정되어야 하며 기본적으로 100%

slugHash를 제외한이 설정은 모두 codepen 속성의 _config.yml에서 설정할 수 있다.

codepen:
  userId: "njean"
  theme: "0"
  default_tabs: "js,result"
  height: 500
  width: "100%"