target="_blank" links in markdown

See original GitHub issue

I would like to know how I can have markdown open in a new tab? I’ve seen quite a few articles online that show markdown should work with [google](google.com){:target="_blank"} but this just renders the braces as plain text on the page.

Searching google and such yields no results on how to do this in 11ty. Any help would be great 😃

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
pdehaancommented, Apr 1, 2022

Finally had a chance to take a look at this… This might get you a bit closer. Just make sure you install [at least] markdown-it-attrs, <kbd>npm i markdown-it-attrs -D</kbd>

// .eleventy.js
const markdownIt = require("markdown-it");
const markdownItAttrs = require("markdown-it-attrs");

module.exports = (eleventyConfig) => {
  const mdOptions = {
    html: true,
    breaks: true,
    linkify: true,
  };
  const markdownLib = markdownIt(mdOptions)
    .use(markdownItAttrs)
    .disable("code");

  eleventyConfig.setLibrary("md", markdownLib);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};
---
# src/index.md
title: 11ty-2301
---

# {{ title }}

Here's a link to [Google](https://google.com){target="_blank"}

OUTPUT

<h1>11ty-2301</h1>
<p>Here's a link to <a href="https://google.com" target="_blank">Google</a></p>
0reactions
zachleatcommented, Apr 11, 2022

We do have this section of the docs for adding your own plugins to Markdown

https://www.11ty.dev/docs/languages/markdown/#add-your-own-plugins

If you have any suggestions for that section, there is an Edit this page link in the footer of that page!

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I create links with 'target="_blank"' in Markdown?
It's compatible with standard Markdown syntax, but has many extensions, too. You would use it like this: [link](url){:target="_blank"}.
Read more >
How To Make A Markdown Link Open In Another Tab
This allows you to use the HTML anchor tag when you need to add an external link instead of the []() syntax in...
Read more >
How to create blank target links in markdown to open url link ...
I want the url to open it in a new tab. The markdown syntax to open a new tab should be: [link](url){:target="_blank"}.
Read more >
About github markdown syntax for link target - Laracasts
Here's what I've tried for markdown (README.md) syntax. Live Demo: [demo](https://example.com){:target="_blank"} //kramdown Live Demo: [demo](https://exam.
Read more >
Markdown Open Link in the New Tab - Linux Hint
When you are creating documentation in markdown, for referencing or some other purposes, you will add links in your file. So when a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found