#markdown

When it comes to creating informative and visually appealing content on your Hugo-powered site, using blockquotes to highlight important notes is a common practice. Blockquotes provide a clear separation from the main text and draw attention to key information. If you’re familiar with GitHub’s style of rendering notes in Markdown files, you might have noticed their visually appealing and distinct note blockquote design (https://github.com/orgs/community/discussions/16925). In this article, we’ll explore how you can achieve a similar look by adding GitHub-style note blockquotes to your Hugo site using shortcodes.

With the help of ShowdownJs and HighlightJs, you can easily build a Markdown component with syntax highlighting.

ShowdownJs is an easy-to-use Markdown to HTML converter, it can be used in both client-side (browser) or server-side (with nodejs).

HighlightJs is an JavaScript library for syntax highlighting on the web. It supports 189 languages and 94 styles.