If you’ve been going through Medium, looking at technical articles, you’ve undoubtedly seen little windows that look like the below:

如果您一直在閱讀Medium，并查看技術文章，那么您無疑會看到類似于以下內容的小窗口：

def hello_there(x):print('Hello there, ' + x)

These are called Github Gists. A gist is an easy way to share excerpts of code or data with others in a clean and reader friendly way. In this article, you’ll see ways to display a function you’ve created, a query into a table, or some other small piece of data (like a sneak peek at a dataframe). These bits of information are hosted by GitHub as a repository. Using gist has all the benefits of utilizing a GitHub repository with a lightweight and easy to share embedding feature.

這些被稱為Github Gists。 要點是一種以簡潔易懂的方式與他人共享代碼或數據摘錄的簡便方法。 在本文中，您將看到顯示創建的函數，查詢表或其他小數據(例如偷偷看數據框)的方法。 這些信息由GitHub作為存儲庫托管。 使用gist具有利用具有輕量級且易于共享的嵌入功能的GitHub存儲庫的所有好處。

Not only are they cleaner but they allow coders who have vision issues a chance to read through your code using accessibility options.

它們不僅更清潔，而且還使視力有問題的編碼人員可以使用輔助功能選項來閱讀您的代碼。

For now, let’s go through the basics:

現在，讓我們看一下基礎知識：

1.前往Github Gists (1. Getting to Github Gists)

There are two ways of getting to the gists portion of Github.com. The first way is for you to go to Gist.Github.com and it will take you to the new gist creation. Or you can go through your Github home page.

有兩種方法可以訪問Github.com的要點部分。 第一種方法是讓您轉到Gist.Github.com ，它將帶您進入新的gist創作。 或者，您可以瀏覽您的Github主頁。

The bottom red arrow, pointing at my profile picture, is how you would get to your repositories or gists. We’ll ignore that one for now and leave it for when we talk about editing old gists. The top arrow, pointing to the plus sign, leads to creating repos, gists, or projects — and that is the one we will be looking at first. After you click on the plus sign, you’ll see a dropdown menu.

底部的紅色箭頭指向我的個人資料照片，它是您到達存儲庫或要點的方式。 我們暫時將其忽略，而在談論編輯舊要點時將其保留。 頂部的箭頭指向加號，它會導致創建存儲庫，要點或項目-這就是我們首先要看的那個。 單擊加號后，您會看到一個下拉菜單。

That will bring you to the page below. Note how you have several fields to fill out.

那將帶您到下面的頁面。 請注意如何填寫幾個字段。

1. Description Box — This will be the title and unofficial name of the gist

   說明框 -這將是要點的標題和非正式名稱

2. Filename + Extension — This is going to be where you name the file, in case of download. It is also the place you declare an extension for the programming language you have used.

   Filename + Extension ( 文件名+擴展名) —如果要下載，它將在其中命名文件。 在這里，您可以聲明所用編程語言的擴展名。

3. Code Box — This is where you enter/paste the code/data you want to display.

   代碼框 -在此輸入/粘貼要顯示的代碼/數據。

2.創建代碼段 (2. Creating a Code Snippet)

From here it’s all plug and play. Let’s try to create a gist with a snippet of code we want to showcase — and I have just the one.

從這里開始即插即用。 讓我們嘗試創建一個包含要展示的代碼片段的要點，而我只有一個。

Below I have a snippet of code written out to impute data from a recent linear regression project I finished. It was written to impute the number of bedrooms a house may have using the bathrooms and square footage of living space of a given house.

下面是我編寫的一小段代碼，用以估算來自最近完成的線性回歸項目的數據。 撰寫該文件的目的是使用給定房屋的浴室和居住空間的平方英尺來估算房屋的臥室數量。

The extension is very important. You can put things like .txt, .py or .html. This notifies the reader what language it was written in — if it is not clear already, and it allows the file to be downloaded with the appropriate extension. The gist works whether you put an extension on it or not — but best ‘practices make better job opportunities’ — Paul Torres 2020.

擴展名非常重要。 您可以放入.txt ， .py或.html之類的內容 。 這樣可以通知讀者使用的是哪種語言-如果尚不清楚，則可以使用適當的擴展名下載文件。 無論您是否進行擴展，要旨都是可行的-但最好的“實踐會創造更好的工作機會” —保羅·托雷斯2020。

After simply copy and pasting the code into the window and filled out the description and the file name.

只需將代碼復制并粘貼到窗口中，然后填寫說明和文件名即可。

I set the settings to public so that the gist could be found in a search on the website. However, you have the option of making a secret gist that cannot be searched — these gists can still be shared with links you can hand out.

我將設置設為公開，以便可以在網站上的搜索中找到要點。 但是，您可以選擇創建無法搜索的秘密要點-這些要點仍然可以與您可以分發的鏈接共享。

3.創建CSV表 (3. Creating a CSV Table)

The next feature we look at is the creation of tables using gists. Gists are not only for showing snippets of code. You can also display small shots of data in them. I say small because as of the publishing of this article, I have not found a method of entering data beyond copy and paste or manual entry.

我們要看的下一個功能是使用要點創建表。 要點不僅用于顯示代碼片段。 您也可以在其中顯示少量數據。 我之所以這么說是因為，在撰寫本文時，我還沒有找到一種可以復制和粘貼或手動輸入數據的方法。

The first step is to start a new gist and edit the file name so that it ends in .csv. This tells the website that you are going to be entering in values for the column index and cells separated by commas. Make sure that each column name is separated by a comma and each subsequent row is ordered in the same was as the column names.

第一步是啟動新的摘要并編輯文件名，使其以.csv結尾。 這告訴網站您將要輸入列索引的值以及用逗號分隔的單元格。 確保每個列名都用逗號分隔，并且每個后續行的排序順序與列名相同。

Looking at the picture above, we can see that the first row of entries are the column names. The second row is the first observation in the data. All of the entries have to be separated by a comma and they all have to be in the order of the column names in the first row. This continues on for the entirety of the table.

看上圖，我們可以看到條目的第一行是列名。 第二行是數據中的第一個觀察值。 所有條目都必須用逗號分隔，并且它們都必須按照第一行中列名的順序排列。 對于整個表格，此操作繼續進行。

Don’t worry about segmentation of the cells or the font of the column names — the website does it for you.

不必擔心單元格的分割或列名稱的字體-網站會為您完成。

Now, let’s take a look at the finished table.

現在，讓我們看一下完成的表。

Each observation is segmented into a different row and each feature is segmented into its own cell. As we said before, the formatting of the font was done automatically when the column names are bolded and placed at the top of their columns.

每個觀察值都被劃分為不同的行，并且每個特征都被劃分為自己的單元格。 如前所述，當列名加粗并放在其列的頂部時，字體的格式會自動完成。

One very helpful feature is the Search Box on the top of the table. It’s not accessible from the embedding but it is on the website. You can search the table and it returns only the values you designate.

一個非常有用的功能是表格頂部的搜索框 。 無法通過嵌入進行訪問，但可以在網站上找到。 您可以搜索該表，它僅返回您指定的值。

4.在中部部署要點 (4. Deploying Gists on Medium)

Now we can talk about showing these gists to the world.

現在我們可以談論向世界展示這些要旨。

Right here on Medium, it is as simple as clicking on the + on the next paragraph potion and clicking the <> option. After pasting the gist’s url, press enter.

就在此處，在Medium上，只需單擊下一個段落部分上的+并單擊<>選項即可。 粘貼要點的網址后，按Enter鍵。

Check out the gif.

查看gif。

5.查找或編輯以前的要點 (5. Finding or Editing Previously Made Gists)

If you go back to your Github homepage, to the right of the create button is your picture. That dropdown menu is going to give you links to your profile and settings — but more importantly your repos, projects, and gists.

如果您返回Github主頁，則創建按鈕右側為您的圖片。 該下拉菜單將為您提供個人資料和設置的鏈接，但更重要的是您的存儲庫，項目和要旨。

Click on the link for Your gists.

單擊您的概要的鏈接。

At which point, you will be taken to a page listing all of your gists.

屆時，您將進入一個列出所有要點的頁面。

Click on one and you will be able to edit. Any gist you edit will update any embedding you have elsewhere. This is a very handy feature in case you spot a mistake or want to format the code in a more pleasing way. Instead of having to visit each embedding, you can just update the gist and it will do the work for you.

單擊一個，就可以進行編輯。 您編輯的要點將更新您在其他地方的任何嵌入。 如果發現錯誤或想要以更令人愉悅的方式格式化代碼，這是一個非常方便的功能。 無需訪問每個嵌入，您只需更新要點，它將為您完成工作。

Thanks for reading. I hope this helps you distribute the beautiful code I know you will write.

謝謝閱讀。 希望這可以幫助您分發我知道您會編寫的漂亮代碼。

Connect with me on LinkedIn here.

在此處通過LinkedIn與我聯系。

For more information about the projects these gists came from, check out my Github here. And you can check out the articles these gists came from below:

有關這些要點來自的項目的更多信息，請在此處查看我的Github 。 您可以查看以下要點的文章：