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

如果您一直在閱讀Medium，并查看技術(shù)文章，那么您無(wú)疑會(huì)看到類(lèi)似于以下內(nèi)容的小窗口：

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.

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

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

它們不僅更清潔，而且還使視力有問(wèn)題的編碼人員可以使用輔助功能選項(xiàng)來(lái)閱讀您的代碼。

For now, let’s go through the basics:

現(xiàn)在，讓我們看一下基礎(chǔ)知識(shí)：

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.

有兩種方法可以訪問(wèn)Github.com的要點(diǎn)部分。 第一種方法是讓您轉(zhuǎn)到Gist.Github.com ，它將帶您進(jìn)入新的gist創(chuàng)作。 或者，您可以瀏覽您的Github主頁(yè)。

The Github homepage lets you get there two waysGithub主頁(yè)讓您到達(dá)那里的兩種方式

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.

底部的紅色箭頭指向我的個(gè)人資料照片，它是您到達(dá)存儲(chǔ)庫(kù)或要點(diǎn)的方式。 我們暫時(shí)將其忽略，而在談?wù)摼庉嬇f要點(diǎn)時(shí)將其保留。 頂部的箭頭指向加號(hào)，它會(huì)導(dǎo)致創(chuàng)建存儲(chǔ)庫(kù)，要點(diǎn)或項(xiàng)目-這就是我們首先要看的那個(gè)。 單擊加號(hào)后，您會(huì)看到一個(gè)下拉菜單。

The new gist link allows you to create a brand new gist新的gist鏈接可讓您創(chuàng)建全新的gist

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

那將帶您到下面的頁(yè)面。 請(qǐng)注意如何填寫(xiě)幾個(gè)字段。

Blank template for a new gist新要點(diǎn)的空白模板

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

說(shuō)明框 -這將是要點(diǎn)的標(biāo)題和非正式名稱(chēng)

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 ( 文件名+擴(kuò)展名) —如果要下載，它將在其中命名文件。 在這里，您可以聲明所用編程語(yǔ)言的擴(kuò)展名。

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

代碼框 -在此輸入/粘貼要顯示的代碼/數(shù)據(jù)。

2.創(chuàng)建代碼段 (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.

從這里開(kāi)始即插即用。 讓我們嘗試創(chuàng)建一個(gè)包含要展示的代碼片段的要點(diǎn)，而我只有一個(gè)。

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.

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

Snippet of Code I created through gists.github.com我通過(guò)gists.github.com創(chuàng)建的代碼片段

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.

擴(kuò)展名非常重要。 您可以放入.txt ， .py或.html之類(lèi)的內(nèi)容 。 這樣可以通知讀者使用的是哪種語(yǔ)言-如果尚不清楚，則可以使用適當(dāng)?shù)臄U(kuò)展名下載文件。 無(wú)論您是否進(jìn)行擴(kuò)展，要旨都是可行的-但最好的“實(shí)踐會(huì)創(chuàng)造更好的工作機(jī)會(huì)” —保羅·托雷斯2020。

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

只需將代碼復(fù)制并粘貼到窗口中，然后填寫(xiě)說(shuō)明和文件名即可。

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.

我將設(shè)置設(shè)為公開(kāi)，以便可以在網(wǎng)站上的搜索中找到要點(diǎn)。 但是，您可以選擇創(chuàng)建無(wú)法搜索的秘密要點(diǎn)-這些要點(diǎn)仍然可以與您可以分發(fā)的鏈接共享。

3.創(chuàng)建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.

我們要看的下一個(gè)功能是使用要點(diǎn)創(chuàng)建表。 要點(diǎn)不僅用于顯示代碼片段。 您也可以在其中顯示少量數(shù)據(jù)。 我之所以這么說(shuō)是因?yàn)?#xff0c;在撰寫(xiě)本文時(shí)，我還沒(méi)有找到一種可以復(fù)制和粘貼或手動(dòng)輸入數(shù)據(jù)的方法。

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.

第一步是啟動(dòng)新的摘要并編輯文件名，使其以.csv結(jié)尾。 這告訴網(wǎng)站您將要輸入列索引的值以及用逗號(hào)分隔的單元格。 確保每個(gè)列名都用逗號(hào)分隔，并且每個(gè)后續(xù)行的排序順序與列名相同。

Make sure to write the words as you would want them to appear確保寫(xiě)出您希望它們出現(xiàn)的單詞

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.

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

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

不必?fù)?dān)心單元格的分割或列名稱(chēng)的字體-網(wǎng)站會(huì)為您完成。

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

現(xiàn)在，讓我們看一下完成的表。

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.

每個(gè)觀察值都被劃分為不同的行，并且每個(gè)特征都被劃分為自己的單元格。 如前所述，當(dāng)列名加粗并放在其列的頂部時(shí)，字體的格式會(huì)自動(dòng)完成。

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.

一個(gè)非常有用的功能是表格頂部的搜索框 。 無(wú)法通過(guò)嵌入進(jìn)行訪問(wèn)，但可以在網(wǎng)站上找到。 您可以搜索該表，它僅返回您指定的值。

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

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

現(xiàn)在我們可以談?wù)撓蚴澜缯故具@些要旨。

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上，只需單擊下一個(gè)段落部分上的+并單擊<>選項(xiàng)即可。 粘貼要點(diǎn)的網(wǎng)址后，按Enter鍵。

Check out the gif.

查看gif。

演示地址

Quick video of the process of embedding on Medium嵌入媒體過(guò)程的快速視頻

5.查找或編輯以前的要點(diǎn) (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主頁(yè)，則創(chuàng)建按鈕右側(cè)為您的圖片。 該下拉菜單將為您提供個(gè)人資料和設(shè)置的鏈接，但更重要的是您的存儲(chǔ)庫(kù)，項(xiàng)目和要旨。

Click on the link for Your gists.

單擊您的概要的鏈接。

This is where you look for already created repos and gists在這里尋找已創(chuàng)建的倉(cāng)庫(kù)和要點(diǎn)

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

屆時(shí)，您將進(jìn)入一個(gè)列出所有要點(diǎn)的頁(yè)面。

My three most recently updated gists我最近更新的三個(gè)要點(diǎn)

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.

單擊一個(gè)，就可以進(jìn)行編輯。 您編輯的要點(diǎn)將更新您在其他地方的任何嵌入。 如果發(fā)現(xiàn)錯(cuò)誤或想要以更令人愉悅的方式格式化代碼，這是一個(gè)非常方便的功能。 無(wú)需訪問(wèn)每個(gè)嵌入，您只需更新要點(diǎn)，它將為您完成工作。

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

謝謝閱讀。 希望這可以幫助您分發(fā)我知道您會(huì)編寫(xiě)的漂亮代碼。

Connect with me on LinkedIn here.

在此處通過(guò)LinkedIn與我聯(lián)系。

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:

有關(guān)這些要點(diǎn)來(lái)自的項(xiàng)目的更多信息，請(qǐng)?jiān)诖颂幉榭次业?strong>Github 。 您可以查看以下要點(diǎn)的文章：

翻譯自: https://towardsdatascience.com/github-gists-101-making-code-sharing-pretty-163d9321a0af

總結(jié)

以上是生活随笔為你收集整理的github gists 101使代码共享漂亮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。