shields VS markdown-here

Compare shields vs markdown-here and see what are their differences.

shields

Concise, consistent, and legible badges in SVG and raster format (by badges)

markdown-here

Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. (by adam-p)
Our great sponsors
  • WorkOS - The modern API for authentication & user identity.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Onboard AI - ChatGPT with full context of any GitHub repo.
shields markdown-here
128 72
22,036 59,335
1.9% -
9.8 0.0
1 day ago about 1 year ago
JavaScript JavaScript
Creative Commons Zero v1.0 Universal MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

shields

Posts with mentions or reviews of shields. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2024-02-06.
  • oImprove your README.md profile with these amazing badges πŸš€
    4 projects | dev.to | 6 Feb 2024
    It's only possible because of Shields Project, Simple Icons & beloved all Contributors. We do respect & love our all contributors.
  • How to Make Your Awesome GitHub Profile
    7 projects | dev.to | 7 Jan 2024
  • </code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> <p>πŸ’‘: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks.</p> </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> <p>To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. </p> <p>Since the profiles are open-source, you can use some of the good ideas for your awesome profile!</p> <p>You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. πŸ˜‰</p> <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> <p>For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix.</p> <p>If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. </p> <p>Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a></p> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> <p>For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons.</p> <p>If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands.</p> <p>Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a></p> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> <p>In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>.</p> <p>If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>.</p> <p>Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"+1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"-1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"100"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1234"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1st_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"2nd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"3rd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"8ball"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="w"> </span></code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list
  • Hey Rustaceans! Got a question? Ask here (49/2023)!
    9 projects | /r/rust | 5 Dec 2023
    I just read the above article by the official rust blog. I wanted to ask what is "feature" and "badge" refered to as in this blog? what does it mean? At some places "shields.io badge " is mentioned. Are "badge" and "feature" some rust terminologies? It will be helpful if someone explains me this blog post in fewer words.
  • Hacktoberfest is ON CXXGraph
    3 projects | dev.to | 9 Oct 2023
  • Cool readme on your github profile page with github actions.
    4 projects | dev.to | 30 Sep 2023
    Avoid using an unordered list for this section, as it can become challenging to read. Instead, the key is to categorize and group your skills and certifications, making them more organized and easier to manage. The specific edits required for this section depend on the number of skills, certifications, and other factors. If you have an extensive list, consider utilizing small badges from shields.io where applicable and hide outdated information.
  • Poetry (Packaging) in motion
    2 projects | dev.to | 27 Sep 2023
    I would highly recommend adding (a few!) badges to any repository that you plan on publishing. You can get some great badges from https://shields.io/ along with the info on how to actually generate them. If your repository is public, this should be easy enough. I would say to avoid spamming a ton and having your README looks like a technicolor dreamland. Just having things like package health, SourceRank and dependencies can help inspire faith in a smaller project. Having that can set you apart by showing that your code works! πŸ˜„
  • GitHub profile of the day: Rustin Liu with lots of badges
    2 projects | dev.to | 12 Sep 2023
    Rustin Liu has a static GitHub profile with tons of badges that get updated as you visit the page. Check out the source of the page in the README.md file. Some of the badges are served by Shields.io some, by GitHub itself.
  • Create and Elevate Your GitHub Profile README
    13 projects | dev.to | 13 Aug 2023
    πŸ“• Docs and list of available dynamic badges: https://shields.io/badges/ πŸ™ GitHub Repo: https://github.com/badges/shields
  • How to write a perfect README for your GitHub project
    2 projects | dev.to | 26 Jun 2023
    Badges are a great way to show off your project's stats. You can add badges for things like the number of stars, forks, and contributors. You can also add badges for CI/CD, code coverage, and more. You can find all badges on shields.io.
  • How to Create a Kick-Ass GitHub Profile in 5 Minutes
    3 projects | dev.to | 22 Jun 2023
    Icons: https://shields.io/

markdown-here

Posts with mentions or reviews of markdown-here. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2024-02-09.
  • How to create a good README.md file
    5 projects | dev.to | 9 Feb 2024
    # Heading 1 ## Heading 2 ### Heading 3 Emphasis, aka italics, with *asterisks* or _underscores_. Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. 1. First ordered list item 2. Another item β‹…β‹…* Unordered sub-list. 1. Actual numbers don't matter, just that it's a number β‹…β‹…1. Ordered sub-list 4. And another item. [I'm an inline-style link](https://www.google.com) [I'm an inline-style link with title](https://www.google.com "Google's Homepage") ![descriptive alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
  • No Markdown support in Google Drive after all these years
    2 projects | news.ycombinator.com | 25 Jun 2023
    It's definitely a workaround, but I use a Chrome extension to work around this a bit. I use "Markdown Here" to add a "turn Markdown text to formatted text" button to my Chrome bar:

    https://markdown-here.com/

    And then I use it on plain Markdown text in a GMail compose window. The rich formatted output it produces can then be pasted into a Google Doc, and it comes out really nicely, including support for headers, sub-headers, links, code blocks, and the rest. The main issue is that this is a one-way process, but so long as you keep the .md source somewhere else, lets you share a richly-formatted doc with others for final commenting/editing/etc.

  • School Project looking for Review
    2 projects | /r/learnprogramming | 4 May 2023
    markdown syntax Can be used to format your read me.
  • Boost Your JavaScript with JSDoc Typing
    5 projects | dev.to | 8 Apr 2023
    You can also use more complex Markdown features like lists and tables. Check out the [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) from Adam Pritchard for more information. ### Other JSDoc tags πŸ“š There are a few other JSDoc tags that you may find useful: - `@function` or `@func`: Documents a function or method. - `@class`: Documents a class constructor. - `@constructor`: Indicates that a function is a constructor for a class. - `@extends` or `@augments`: Indicates that a class or type extends another class or type. - `@implements`: Indicates that a class or type implements an interface. - `@namespace`: Groups related items, such as functions, classes, or types, under a common namespace. - `@memberof`: Specifies that an item belongs to a class, namespace, or module. - `@ignore`: Tells JSDoc to exclude an item from the generated documentation. - `@deprecated`: Marks a function, class, or property as deprecated, indicating it should no longer be used. - `@since`: Documents the version when an item was introduced. And many more. You can find a full list of JSDoc tags [here](https://jsdoc.app/). Ok ok, enough of the theory. Let's see how we can use JSDoc in practice. ![Reality Check Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/polug716a3hs9lgwr8tf.gif) ## Using JSDoc in practice πŸ„β€β™‚οΈ There are a few challenges when starting to use JSDoc in your project. So this section will focus on these challenges and how you can overcome them. ### How to get the most out of JSDoc In this post I'm going to stick with VSCode. If you're using another editor, you can still follow along, but you might have to look up how to configure things in your editor. VSCode has built-in support for JSDoc. This means that you can get a lot of the JSDoc benefits without having to install any additional extensions. But there are a few things that you can do to get even more out of JSDoc. Enabling the checkJs option in your `jsconfig.json` file will make the editor display errors for type mismatches, even in JavaScript files. Place it in the root of your project or in the folder where you want to enable type checking. This file can look like this: ```json { "compilerOptions": { "checkJs": true, } }
  • markdown sheet cheat
    2 projects | /r/jordan | 13 Mar 2023
  • My setup for publishing to Dev.to using github
    6 projects | dev.to | 10 Feb 2023
    Once this is done, you can write your markdown article
  • Ain't much but I MADE MY OWN GAME USING PYTHON AND I JUST LEARNED PROGRAMMING FOR THE FIRST TIME 4 WEEKS AGO.
    2 projects | /r/learnpython | 30 Jan 2023
    And another one.
  • Book recommendations for learning markdown? Or websites?
    2 projects | /r/Markdown | 30 Nov 2022
  • I made the best Github ReadMe EVER!
    7 projects | dev.to | 4 Sep 2022
    Here are the best practices for markdown. Here, you'll see the many ways to create tables and format your Github ReadMe.
  • Cloudinary in Jamstack using Webp
    2 projects | dev.to | 30 Aug 2022
    ![](https://media.codingcat.dev/image/upload/v1657636770/main-codingcatdev-photo/a9d5300d-5d9c-4a23-a3ce-e37e8b621173.png) As you can see below Safari will use the `` tag and not refer back to the `` tag, and it will show the image correctly. ![](https://media.codingcat.dev/image/upload/v1657636764/main-codingcatdev-photo/dab3fd4a-a7f0-45f1-be7b-f5e143d74e68.png) ![](https://media.codingcat.dev/image/upload/v1657636762/main-codingcatdev-photo/20b0aea2-3459-4ee6-bf55-df5d3d6002e6.jpg) In Chrome the `` tag is used so it will automatically pickup the webp extension and work correctly. ## Markdown ### Why Markdown I cross post my lessons and blogs over to [DEV](https://dev.to/). Because of this I don't prefer to use shortcodes and instead stick with supported markdown syntax. I also tend to move on the the next "cool" technology platform often.For instance I can easily load all Markdown to: ### Markdown in Hugo I fully admit that it takes me much longer to take my [markdown file images](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images) and replace them for `` tags (yes I am lazy). Hugo provides amazing things called [shortcodes](https://gohugo.io/content-management/shortcodes/) that will allow you to execute a great deal of code in a short one line example of markdown. [xabeng](https://dev.to/xabeng) created an awesome set of shortcodes [my hugo shortcode for including image from cloudinary](https://dev.to/xabeng/my-hugo-shortcode-for-including-image-from-cloudinary-1l46). ### VSCode Extension - Paste Image - Cloudinary [markdown image paste](https://marketplace.visualstudio.com/items?itemName=njLeonZhang.markdown-image-paste) is a fantastic plugin that allows you to take screenshots easily and loads them directly to cloudinary. By default once the upload completes it will place the new image URL into a markdown image tag.I did open an [issue](https://github.com/njleonzhang/vscode-extension-mardown-image-paste/issues/9) to allow for `html` code instead of the generic markdown syntax.

What are some alternatives?

When comparing shields and markdown-here you can also consider the following projects:

notable - The Markdown-based note-taking app that doesn't suck.

termux-widget - Termux add-on app which adds shortcuts to commands on the home screen.

simple-icons - SVG icons for popular brands

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

Hugo - The world’s fastest framework for building websites.

github-readme-stats - :zap: Dynamically generated stats for your github readmes

mpv-image-viewer - Configuration, scripts and tips for using mpv as an image viewer

MSON - πŸ—οΈMSON Lang: Generate an app from JSON

react-pdf - πŸ“„ Create PDF files using React

markdown-badges - Badges for your personal developer branding, profile, and projects.