在 Medium 中嵌入 source code

Lion
Lion
Apr 17, 2018 · 2 min read
Image for post
Image for post

之前在寫文章的時候,會碰到剛好需要貼上 source code 和大家分享,之前的做法有下面兩種:
1.短的 code用右邊這種來呈現 $ npm install bootstrap-vue --save
2.比較長篇幅的用貼上圖片的方式,如下圖所示

Image for post
Image for post

這樣一來如果code 內容比較多的話,日後如果我要使用這段code或是觀看到我的文章的人,可能會造成無法複製code的困擾,所以今天要跟大家分享一下我看到其他人的做法。

利用 github gist 的功能, 這個服務可以讓您輸入程式碼片段或是完整程式碼,透過Javascript嵌入到網頁中,有漂亮編排、程式碼高亮功能,只要有github 帳號登入之後馬上就可以使用啦!!

首先點擊右上角黃框框 new gist

Image for post
Image for post

接下來填入關於這段程式碼的描述檔案名稱以及中間程式碼內容的部分,如果不想被搜尋引擎搜到可以用 secret gist,但只要知道這段 url 的人還是可以看到這段程式碼。

Image for post
Image for post

create gist 之後,將 share 的網址複製下來

Image for post
Image for post

複製完成後,來到 Medium 點選 add an embed 將連結貼上

Image for post
Image for post

貼上完畢後,大力的按下Enter,就可以看到我們精美的程式碼啦!!!!

這樣就大功告成啦!!!!!

Lion

Written by

Lion

Personal blog note for linux c++ devops : https://medium.com/cubemail88

cubemail88

東西這麼多,腦袋這麼小!! 來記點東西吧

Lion

Written by

Lion

Personal blog note for linux c++ devops : https://medium.com/cubemail88

cubemail88

東西這麼多,腦袋這麼小!! 來記點東西吧

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store