npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

markdown-it-rss-friendly-github-alerts

v0.1.6

Published

Support GitHub-style alerts for markdown-it, forked from markdown-it-github-alerts

Downloads

1

Readme

markdown-it-rss-friendly-github-alerts

This plugin is forked from markdown-it-github-alerts by Anthony Fu.

My fork is addressing the following issues: In case your content is delivered through a RSS feed (it should) where you do not have control about the styling, the formatting is not ideal. E.g. there is no space between the icon and the title, the color of the icon does not adapt to the text color, and the rendering as a div might not help for reading, a blockquote would be better in my view for this case.

Support GitHub-style alerts for markdown-it.

[!NOTE] Highlights information that users should take into account, even when skimming.

[!TIP] Optional information to help a user be more successful.

[!IMPORTANT] Crucial information necessary for users to succeed.

[!WARNING] Critical content demanding immediate user attention due to potential risks.

[!CAUTION] Negative potential consequences of an action.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Usage

npm i markdown-it-rss-friendly-github-alerts
import MarkdownIt from 'markdown-it'
import MarkdownItRSSFriendlyGitHubAlerts from 'markdown-it-rss-friendly-github-alerts'

const md = MarkdownIt()

md.use(MarkdownItRSSFriendlyGitHubAlerts, /* Options */)

const html = md.render(/* ... */)

For the options available, please refer to the jsdoc.

Functionality

This plugin transforms the following markdown:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

to the following HTML:

<blockquote class="markdown-alert markdown-alert-note">
  <p class="markdown-alert-title" style="display: flex; align-items: center;">
    <svg class="octicon octicon-info" fill="currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>&nbsp;Note</p>
  <p>Highlights information that users should take into account, even when skimming.</p>
</blockquote>

[!IMPORTANT] This output is not identical with GitHub's output, because the alert is rendered as a blockquote and not as a div. There is also an &nbsp; between the svg icon the marker text and svg has the setting fill="currentColor, which GitHub wouldn´t render.

Styling

You can write custom styles for your alerts, and there is some CSS extracted from GitHub's styles for you to use.

import 'markdown-it-rss-friendly-github-alerts/styles/github-colors-light.css'
import 'markdown-it-rss-friendly-github-alerts/styles/github-colors-dark-media.css'
import 'markdown-it-rss-friendly-github-alerts/styles/github-base.css'

You might change github-colors-dark-media.css to github-colors-dark-class.css if you are using class-based (.dark) dark mode.

Refer to the source code for more details.

Customization

In order to also support Obsidian callouts syntax it is possible to allow any type of markers with the following setting:

md.use(MarkdownItRSSFriendlyGitHubAlerts, {
  markers: '*'
})

Alternative titles are also supported, by appending it to the marker like this:

> [!note] Nota bene
> The custom title will replace the regular title.