首先，我們先打開codepen，註冊/登陸
codepen官網 https://codepen.io/
註冊或登陸時候，你可以選擇 facebook、github或Twitter進行直接登陸。
郵箱驗證
首次使用codepen，需要做一次郵箱驗證，會有提示，大家點擊驗證，會有郵箱消息，進入郵箱點擊認證鏈接認證。
創建
在左側導航欄，選擇 Pen→Pen 即可創建一個空白的代碼模板， From Template是自定義一個模板，後期每次都可以選擇使用。當然，你也可以選擇vue之類模板。
使用
也可以修改模板的展示效果，如下圖所示
也可以設置一些其他功能，如 自動保存，格式化，實時預覽等
保存-分享鏈接
如何引入到網頁
點擊右下角 插入 ，複製彈窗的插入代碼即可
最終引入的效果展示
這是我從我的博客截圖的效果 http://sharedblog.cn/post/183.html
查看自己的代碼列表
如何引入外部js或css
特別注意
用戶名，註冊時候，就一次安排到位，不建議在二次修改，二次修改之後，你之前分享的demo鏈接就可能會失效，404頁面。
這是編輯資料頁面
個人博客
前端共享博客 http://sharedblog.cn
前端軟件下載 http://iqzhan.com