Opening an external link in a new window in markdown

Site URL: https://www.roadsafetytrust.org.uk

Hi.

I am not a coder at all and have never used markdown until today (but have produced quite a lot of Squarespace sites). What I would like to know is if anyone has found a way to make external links open in a new window when using markdown? I wanted to produce a list of FAQs that you click on the title to expand. I thought I had found the solution, until I tested the page. See: www.roadsafetytrust.org.uk/faqs-md

If anyone has a solution, I would be really, really grateful. Even if it means buying a plug-in.

Thank you!

Lynne

Hi @spotonlynne

We made a cool FREE extension for FAQ. It works like SQSP other elements. You don't need code knowledge! And you don't need HTML Code block or Markdown or ....

Just see this video and install from here.

If you need more customization feel free to contact me via DM or Skype: LeopoldJobs.

Best,
Leopold

30 minutes ago, spotonlynne said:

What I would like to know is if anyone has found a way to make external links open in a new window when using markdown?

Hi Lynne

You can add HTML to Markdown Blocks, so instead of using the link button, you can simply add the HTML. For example:

<a href="www.squarespace.com" target="_blank">Squarespace</a>

Change the url and description to match your needs. 

Note that this will open a new “browsing context”. This usually means "new tab" instead of "new window", but it will depend on the visitor’s browser settings. You have no influence over that.

-Paul

You can also use the Accordion Plugin from sqspthemes.  (affiliate link)

With this plugin you can use the Text Block for Accordion Content, so you will insert the link with the customization that opens in a new window.

or use this free tool to add FAQ Accordion Dropdown.

On 9/12/2020 at 7:42 AM, paul2009 said:

Hi Lynne

You can add HTML to Markdown Blocks, so instead of using the link button, you can simply add the HTML. For example:

<a href="www.squarespace.com" target="_blank">Squarespace</a>

Change the url and description to match your needs. 

Note that this will open a new “browsing context”. This usually means "new tab" instead of "new window", but it will depend on the visitor’s browser settings. You have no influence over that.

-Paul

Site URL: https://www.chrispcreations.com/about

I'm running into a similar issue. I am able to use the link button within the Markdown block to add an external link but can't get it to open in a new tab/window. I tried plugging your HTML snippet in but must not be doing it correctly because it's not working—any advice?

On 12/21/2020 at 2:07 PM, chrisp14 said:

I'm running into a similar issue. I am able to use the link button within the Markdown block to add an external link but can't get it to open in a new tab/window. I tried plugging your HTML snippet in but must not be doing it correctly because it's not working—any advice?

Can you share link to page where you use Markdown? We can help easier

On 12/22/2020 at 1:29 AM, tuanphan said:

Can you share link to page where you use Markdown? We can help easier

Site URL: https://www.chrispcreations.com/about

I am also having an issue where I am unable to add a second visible link—link functions but the text is literally invisible. Updated markdown attached.

@chrisp14

You're so close to having 100% HTML I suggest you use a code block set to HTML and add the following.

<style>

  .expertise-list {
  
    font-size: 2em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    list-style-type: none; /* remove bullets */
    margin: 0; /* remove margins */
    padding: 0; /* remove padding */
    
    }
    
  .expertise-list a {
  
    font-size: 0.5em;
    
    }
    
  </style>

<p>

  Areas of Expertise
  
  </p>

<ul class="expertise-list">

  <li>
  
    Art Direction
    
    </li>
    
  <li>
  
    Motion Design
    
    <a href="http://chrispcreations.com/motion-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  <li>
  
    Visual Effects
    
    <a href="http://chrispcreations.com/vfx-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  </ul>

Test this first before you delete your current code block. Basically we use an unordered list and create our own class to reduce some of the redundant styling.

Let us know how it goes.

18 hours ago, creedon said:

@chrisp14

You're so close to having 100% HTML I suggest you use a code block set to HTML and add the following.

<style>

  .expertise-list {
  
    font-size: 2em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    list-style-type: none; /* remove bullets */
    margin: 0; /* remove margins */
    padding: 0; /* remove padding */
    
    }
    
  .expertise-list a {
  
    font-size: 0.5em;
    
    }
    
  </style>

<p>

  Areas of Expertise
  
  </p>

<ul class="expertise-list">

  <li>
  
    Art Direction
    
    </li>
    
  <li>
  
    Motion Design
    
    <a href="http://chrispcreations.com/motion-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  <li>
  
    Visual Effects
    
    <a href="http://chrispcreations.com/vfx-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  </ul>

Test this first before you delete your current code block. Basically we use an unordered list and create our own class to reduce some of the redundant styling.

Let us know how it goes.

Thank you creedon! I plugged that in to a code block and it works like a charm. Made a few more adjustments to get the spacing and color correct. Thanks again for your help.