Please note: This site is in an active redesign. Some things might be a little off 🧐


Owning my code snippets

In the software world, it is very common to take snippets of code that you want to show or discuss with people and post it on GitHub as a Gist, which is a public link that shows code with line numbers and syntax highlighting for the language used.

Back in January 2018, Aaron Parecki added the ability to post Code Snippets over Micropub to his Micropub client Quill. He also fixed up a nice display on his website.

Today, I am excited to add the same functionality to my own site. Using the Code Snippet interface of Quill, I am able to create a snippet on my own website, that gets line numbers and syntax highlighting. You can see the first, test snippet in JavaScript here. I also wanted to get more functionality like GitHub, so I added the ability to highlight lines on the page to help with conversational context. If you click on the line while looking at a code snippet, it will automatically highlight the line and add a code line fragment to the url hash (for example: #L3 or #L1,L4 or #L3-L5). You'll notice the example includes both a single line, multiple non-contiguous lines or a line range. In fact, it will even support multiple non-contiguous ranges. What is better is that when the page loads, it will read the url fragment and auto-highlight the respective lines.

This means I can post a code snippet, select some specific lines and then share the resulting url with fragment to someone and the code snippet will automatically highlight the specific lines to them. Also, the possibility exists that someone could include a code line fragment in the url when sending a webmention to my code snippet and like media fragment, I would then be able to consume the code line fragment and associate the webmention with the specific code snippet lines.

One more step towards owning my own data AND replacing GitHub functionality through distributed means.

51.61 ℉☁️techindiewebcolophon
posted using