markdown link psa
Update: Ava informed me that Bear Blog does support opening links in a new tab using this format: [link](tab:https://example.com). Thus, the links in Prasatt's post would render properly without the space after tab:. Find this feature and more in Bear Blog's Navigation docs page.
At the time of writing, Prasatt's 3 things for a healthier life included Markdown links which didn't render properly. He used this format: [link](tab: https://example.com)
As far as I can tell, Bear Blog doesn't support Markdown links which can open in a new tab.
While certain flavors support the feature via attribute links, like markdown-it as in Coffee's Markdown: Opening External Links in New Tabs or Kramdown as in CodeGenes' How to Open Links in New Tab with GitHub Markdown Using target="_blank" (Fix for Non-Working Links), that seems out of scope for helping Prasatt out.
However, Bear Blog does support HTML links. Acceptable HTML links which open in a new tab include the following:
<a href="https://example.com" target="_blank">Link</a><a href="https://example.com" target="_blank" rel="noopener">Link</a><a href="https://example.com" target="_blank" rel="noreferrer">Link</a>
Let me explain what those attributes mean.
The target="_blank" attribute causes a link to open in a new tab when clicked.
MDN's rel="noopener" - HTML page says that the rel="noopener" attribute prevents giving the opened page access to the page that opened it.
Can I use's "rel="noopener"" page indicates that target="_blank" implies rel="noopener".
As for the rel="noreferrer" attribute: it takes rel="noopener" and prevents leaking referrer information. My understanding is that, from a paying Bear Blog user's perspective, inbound links using rel="noreferrer" will not contribute to the link referrers in their analytics. The attribute also adds very limited legacy browser support.
Combining the above information shows how the link formats I shared prevent issues like these:
- Opened pages running in the same process as the original can cause the original page's performance to suffer.
- Attackers can redirect the original page to malicious URLs.
- Attackers can tamper with elements on the original page the link from to malicious URLs.
So, beyond performance and security, when should you use HTML links that open in a new tab anyway? Mathias' About rel=noopener page references Chris' CSS-Tricks article, When to use target="_blank". Chris suggests using target="_blank" only to prevent interrupting on-site media, user-generated content, or other edge cases. That includes Bear Blog posts or pages where users can watch embedded videos, fill in contact forms, or otherwise actively engage onsite.
For other blog posts and pages, you can give control back to your visitors. They can open a normal link in a new tab in multiple ways:
- Click a link with the middle mouse button.
- Hold
CtrlorCmdwhile clicking a link. - Hold
Ctrl+ShiftorCmd+Shifttogether while clicking a link to shift focus to the new tab. - For a keyboard-only method, use the above keypresses after putting keyboard focus on the desired link via
TaborShift+Tab. - Right-click or hold a link with your finger to open a context menu for it. Then, select the
Open in new tabcontext menu item or its equivalent. - Opt for browser extensions or gestures that support this behavior automatically or on-demand.