Snippet 是一款代碼片段收集工具，經過一天三夜的開發終于上線了。

• 應用地址：snippets.barretlee.com
• 源碼地址：barretlee/snippets

由于使用原生 JS 開發，效果利用 CSS3 實現，所以如果想有一個好的視覺體驗，請使用 Chrome/FireFox 預覽（后續會持續優化）。

?

基本功能

代碼片段收集工具？你說的是 gist 么？這東西有用？昨天我在社交平臺發上線預告的時候，有幾個朋友提出來疑問。二話不多說，先去看線上效果。

本應用使用 Jekyll 構建，托管在 github 上，提供了如下基本功能：

• Snippet 按照文件夾儲存分類呈現
• 整合在一起之后，單頁面預覽所有 Snippet
• 提供了快捷的搜索功能
• 每個 Snippet 對應 github 直接編輯的地址
• 提供了一個添加 Snippet 的快捷入口
• Snippet 的語法就是 markdown ，當然也可以跟寫博客似的寫 snipet，嵌入 demo，嵌入說明等。

所以只要有 github 權限，可以直接編輯代碼，立即生效。

使用說明

一個小東西，硬生生開發了十幾個小時。我對很多小細節扣的比較多，雖然自己不是設計出身，但是要求自己設計出來的東西能看、好看，所以常常走簡約路線，復雜的設計搞不定。為了體驗更好一些，我在頁面上添加了幾個小功能：

1. 添加 snippet

進入頁面之后，你可能看清楚了，左上角位置有個不是很明顯的加號，點進去就會跑到 github 頁面，由于是我的倉庫，只有我能夠直接編輯，其他人如果想添加代碼段，需要 fork 過去之后，提交 PR，后續我會開發一個工具，方便其他人直接提交代碼。

新建文件夾十分方便，輸入 /foldName 然后回車，github 就會自動建立一個文件夾，當然，如果文件夾存在，就會是進入文件夾。

2. 搜索 snippet

當我做完之后，發現找到一個自己收藏的 snippet 可真難，于是很自然的開發了一個搜索工具，搜索的范圍是所有 snippet 的 title 名稱，如果匹配到了就展示出來（當然，需要你點擊 Enter 按鈕）。

3. 編輯 snippet

這個快捷入口直達該 snippet 的編輯地址，可以線上編輯，commit 之后立即生效。

這也是我為什么不使用 hexo 本地構建而使用 Jekyll 讓 github 自動構建的目的（hexo 寫插件用的語言是 nodejs，而 jekyll 是 ruby，所以各有利弊，本博客使用的就是 hexo 構建）。如果你喜歡這個 snippet ，可以點擊編輯按鈕左側的小紅心，哈哈~

后續開發

整個應用的開發，相對還是比較倉促的，存在比較多大的問題，所以后續有空也會不斷優化它，直到我和大家用的都爽~ 那么，后續需要做的事情有：

• 響應式預覽頁面
• 收集 snippet 的工具
• 補充更多類型 snippet，提升完整度
• github 訪問較慢，托管到 gitcafe 或者 coding

好了，如果大家喜歡這個應用，就去 github 上 start/fork 并且提交你的 snippet 吧！！

貢獻代碼

如果你想貢獻代碼，可以執行如下操作：

• fork barretlee/snippets 倉庫
• 然后執行如下命令

git clone https://github.com/{YOUR_GITHUB_NAME}/snippets.git cd snippets git chechout -b gh-pages cd snippets # 選擇你想提交的文件類型，比如 html cd html touch {YOUR_CONTRIBUTE_FILE_NAME}.snippet

可以使用 markdown 語法。其中，{YOUR_CONTRIBUTE_FILE_NAME}.snippet 的格式為：

--- title: {NAME} ---{CONTENT}

• 提交代碼

git add --all git commit -m "add file html/{YOUR_CONTRIBUTE_FILE_NAME}.snippet" git push origin gh-pages

• 然后在你的 PR 頁面提交一個 PR 到 barretlee/snippets 的倉庫
  
  

本文轉自我的個人博客：http://www.barretlee.com/blog/2015/09/29/new-application-snippet/

?

總結

以上是生活随笔為你收集整理的新应用上线 Snippet的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。