Hexo tag to embed code snippet
hexo-tag-codepen-x
②Using tag in MD files
中文文档|English
InstallThis is a plug-in that allows
Hexoblogs to usecodeopenHexo Docs
CodeOpen
npm i hexo-tag-codepen-x Usage ①Global configuration
Set the file _ config.yml under the Hexo blog directory
codepen: user: "xu-ux" theme: "33713" default_tabs: "js,result" height: 500 width: "100%" click_load: false editable: true style: {height: 600px, border-radius: 10px}
| Field | Value | Desc |
|---|---|---|
| click_load | boolean |
Use Click-to-Load (The result in Embedded Pens can either load right away, or be in a preview state where they need to be clicked to load, which can be good for performance.) |
| editable | boolean |
Make Code Editable (You can make the code in this Embedded Pen editable, meaning you can change code and see the results, just like in the Pen Editor here. Editable Embeds require more resources than non-editable Embeds.) |
| user | xu-ux |
Codeopen UserId |
| theme | light/dark |
The embedded container theme（dark or light） |
| default_tabs | html,result |
Default tab page （html,result,js） |
| height | 600 |
Height of the embedded container |
| width | 100% |
Width of the embedded container |
| style | Object |
Custom styles |
{% codepen slugHash user|anon tabs theme height width %}
| Field | Value | Desc |
|---|---|---|
| slugHash | XWgPqjN |
Codeopen Unique ID |
| user | xu-ux |
Codeopen UserId |
| theme | light/dark |
The embedded container theme（dark or light） |
| default_tabs | html,result |
Default tab page （html,result,js） |
| height | 600 |
Height of the embedded container |
| width | 100% |
Width of the embedded container |
The value inside the tag is used first, followed by the value of the global configuration
{% codepen XWgPqjN %}
OR
{% codepen XWgPqjN xu-ux %}
OR
{% codepen XWgPqjN xu-ux js,result dark 600 %}
OR
Display：
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
