GitHub Flavored Markdown (sometimes abbreviated to GFM) makes it easier to work with markdown on GitHub.com. Key features of GFM include: code indentation; task list support. GitHub Flavored Markdown, often shortened as GFM, is the dialect of Markdown that is currently supported for user content on GitHub.com and GitHub Enterprise. This formal specification, based on the CommonMark Spec, defines the syntax and semantics of this dialect. Markdown is a lightweight and an easy-to-use syntax for styling all forms of writing on the GitHub platform. This document contains a basic overview of the markdown syntax. Use this document as a reference guide for documenting projects on the GitHub platform. For more examples, see the GitHub Flavored Markdown Spec. To create a task list, preface list items with a regular space character followed by. To mark a task as complete, use x. x Finish my changes - Push my commits to GitHub - Open a pull request. A markdown editor just like github flavored editor based on markdown-it - weflex/markdown-editor-flavored.
This is the second in a series of posts featuring protips from GitHubbers. This post highlights some great browser extensions, URL hacks, keyboard shortcuts, plus a few dad jokes.
I’ve been using GitHub as an engineering, business development, and marketing manager for over 10 years now—quite the career trajectory! Along the way, I’ve picked up a few tricks to manage my notifications, quickly locate content and create pull requests, push markdown to its limits, and personalize my experience with some third party extensions. I’m sharing a few of my favorites, and hopefully there’s something new and helpful for you.
1. Fuzzy file finder 🔎
I think I was working at GitHub for over a year before I discovered that we had a fuzzy file finder. Press t in any repository to access it and start typing the name of the file you want to find. I used to find it invaluable jumping into new Rails projects and quickly looking for schema.rb to get a feel for the app.
2. Browse files and directories with ease
Speaking of searching for files, this great browser extension called Octotree helps you navigate directories, and open files with a familiar tree-like structure.
Bonus points: It works with GitHub Enterprise 🙌
Fun fact: I reached out to the author about supporting GitHub Enterprise a few years ago. If you’re building a browser extension for GitHub, and want to make sure it works for GitHub Enterprise, you can get a developer license by joining the GitHub Developer Program.
3. Be alerted to new notifications
On the topic of browser extensions, this project from @sindresorhus tells you exactly how many GitHub notifications are waiting with an unobtrusive icon on your toolbar. You can enable Desktop notifications too if that’s your jam.
It also works with GitHub Enterprise. All you have to do is change the API endpoint to match your instance’s URL (for example, https://api.github.cyberdynesystems.com).
4. Make your @mentions stand out 📝
No matter how many elaborate email or notification filters you set up, there’s always one that slips through the cracks. Mention Highlighter, created by my buddy @benbalter, highlights all references to my name and wow, do they jump out! Even in a wall of text or when I’m quickly skimming comments, I’m able to see any mentions directed to me.
5. Linking to code snippets
This isn’t so much of a secret, but it’s definitely not known by everyone, and occasionally blows minds. You can link to specific lines of code by clicking the line number when you’re viewing a file. By default, the line number (for example, #L1337) is appended to the URL, which will always take you directly to that line.
If that file is edited, deleted, or renamed, unfortunately the link will no longer work as expected. You can press y or click Copy permalink to generate the canonical URL that will always work.
You can also link to a line number range by holding down SHIFT and selecting the starting and ending lines.
Added bonus: If you add a code snippet link in a GitHub comment, a nice visualization of the code appears.
I recall that this feature was originally built by a few interns several years ago. If you like hacking on fun stuff like this, consider applying to our internship program!
6. Must-have Markdown formatting tips
GitHub Flavored Markdown is great for vanilla formatting of text and basic tables, but sometimes you need to get creative to make it do what you want.
Keyboard tags
You can use <kbd> tags to make text appear like a button, which is slightly different from regular backticked text. It’s perfect for documenting things like keyboard shortcuts or game controls in your READMEs/wikis.
Visualizing hex codesVisualizing hex codes'>
Placing hex colors in backticks renders a tile in that color. I think it’s totally hexcellent!
Visualizing diffs 🧡💚
You can visualize a diff using backticks and diff which highlights lines red or green as appropriate.
In fact, if you add the language after the opening three backticks, the code is syntax highlighted accordingly.
The devil’s in the details
Adding lengthy error logs or verbose program output to an issue can be helpful in resolving a bug, but if it takes up pages of vertical space, consider using the <details> and <summary> tags.
Centering text and images
It’s 2020 and I still struggle with centering anything in web pages. I find a combination of <div align=”center”> [ Your content here ]</div> works wonders. Perfect for centering a logo in your repository’s README, for example.
Smaller text
Wrap text in <sup> or <sub> tags to make it a little smaller. Perfect for adding things like “Fig 1: description” under images, or making text smaller in tables so it doesn’t scroll horizontally.
At this point, we’re basically back in the 90s with good old-fashioned, hand-crafted HTML. As someone who did that using Notepad and Netscape Navigator back in the day, I’m okay with that.
Bonus Markdown Protip: My buddy @bitoiu had some great tips for working with Markdown tables in the last GitHub Protips post—definitely check it out!
7. URL-hacking topics
One of my guilty pleasures is looking for new projects on GitHub tagged with #game, and playing testing them, or cloning them to “change stuff and see what happens”. It’s a great activity for coffee breaks or boring Sunday afternoons.
Our UI exposes ways for you to filter by a single topic and language (for example, searching for all repositories categorized as #game written in JavaScript). The only way to view the search results for the combination of two topics is through a bit of URL hacking. Simply append a ?q=[TOPIC] to the topic URL to combine the results of two topics. Some examples:
- All repositories tagged with
#covid-19and#visualization:
https://github.com/topics/covid-19?q=visualization - All repositories tagged with
#chrome-extensionand#github:
https://github.com/topics/chrome-extension?q=github - All repositories tagged with
#unityand#shader:
https://github.com/topics/unity?q=shader - All repositories tagged with
#minecraftand#mod:
https://github.com/topics/minecraft?q=mod
Did you know: Applying topics to your repositories helps people discover them, and even contribute to them? It’s as simple as clicking a button and typing a few keywords related to your project’s purpose and subject area:
8. Dark theme
For the l33t h4x0rs amongst you, the unofficial GitHub Dark Theme browser extension might be of interest. It works with Chrome, Firefox, Opera, and Safari, plus we finally fixed that favicon issue. Perfect for those late-night hacking sessions. 😎
Github Flavored Markdown Preview
Did you know: Most software engineers prefer to use dark mode because, wait for it… light attracts more bugs. </dad_joke>
9. A numbers game
Lxi 12 vinyl cutting software mac free download. Sometimes it’s useful (or entertaining) to analyze a repository’s metadata and pull out metrics. Hopefully nobody’s judged on how many commits they make, but you can generate an ordered list of authors by commit count from the command line with git shortlog -sn.
You can also exclude merge commits with git shortlog -sn --no-merges.
If it’s a public repository, GitHub High Scores gives you an old-school, 8-bit, arcade-like view of your repository’s contributors. Perfect for showboating your dominance and printing out to pin on the office bulletin board or fridge. 💪🏻
Anyone who squashes their commits is going to be lower on the table—everyone’s a winner.
That’s just the commits, but what about lines of code? Every good engineer knows that’s the most important metric. There are tons of neat CLI projects to help you analyze the Git data.
@arzzen’s git-quick-stats gives a nice overview of repository activity. You can even see contributions by day, hour, and month.
git-famefrom @casperdcl also summarizes contributions including lines of code.
@IonicaBizau’s git-stats includes all sorts of interesting data, including contributions and pie charts. Much like many of his projects, the CLI output is delightful. 👏🏻
Hopefully you and your team understand your value is measured by more than lines of code and number of commits. If those metrics are tied to your holiday bonus, it might be time to look for a new job. We’re hiring!
10. Morse code workout 💪🏻
Last, but not least… have you ever dreamt for a way to get your exercise in and practice your morse code?!? Wait no more! This ingenious app from @veggiedefender generates morse code by repeatedly slamming your laptop shut, and comes with the greatest feature list I’ve ever seen. It’s great exercise while you’re stuck in the house, and still paying for that gym membership. .-. — .-.
Editor’s note: We honestly aren’t sure if Lee is joking, or serious with this one. Proceed with caution and at your own risk. 🤷
That’s enough tips and dad jokes for one blog post. Thanks for reading! <3
Do you have a GitHub Protip?
Github Flavored Markdown Html
Do you have a tip, trick, or hack that makes your daily life easier on GitHub? Share it with us on social media with #GitHubProtips.