Squarsepace: Markdown Block Tips

A few things can be helpful for you when using Markdown Block in Squarespace.

Notes

• How to Insert CSS

Change Markdown Block Color

Add this CSS

.markdown-block {
    background: gray;
}

Center Text Markdown

Use this CSS

.markdown-block {
    text-align: center;
}

Center Header

Use this CSS

.markdown-block h1 {
    text-align: center;
}
.markdown-block h2 {
    text-align: center;
}
.markdown-block h3 {
    text-align: center;
}
.markdown-block h4 {
    text-align: center;
}
.markdown-block h5 {
    text-align: center;
}
.markdown-block h6 {
    text-align: center;
}

Markdown Font Color

When typing text in Markdown, use this format

Hey, <span style="color:red;font-size:20px;text-decoration:underline;">you know how</span> I'm, like, always trying to save the planet? Here's my chance

Markdown Box Around Text

Use this CSS

.markdown-block {
    background: #f1f2f4;
    border-color: red;
    border-width: 2px;
    border-style: solid;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

Markdown Open Link in New Tab

You can use 2 ways

Way 1. Use this format when typing link

<a href="https://google.com" target="_blank">Text link</a>

Way 2. Use jQuery

First, typing text link in Markdown Block. You can follow below guide (or see this)

Next, add this code to Home > Settings > Advanced > Code Injection > Header (or Page Settings > Advanced > Header)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {    
   $('.markdown-block a').attr('target','_blank');
});
</script>

Markdown Center Image

First, to insert images to Markdown, follow this guide.

Next, to center image in Markdown, add this CSS

.markdown-block img {
    display: block;
    margin: 0 auto;
}

Strike Through Text in Markdown

To create strike through text, type text in this format

here is <span style="text-decoration:line-through;">strike text</span>

Increase Font Size in Markdown

Use this format

here is font with <span style="font-size:50px;">big size</span>

Underline Text in Markdown

Use this format

<span style="text-decoration:underline;">underline text</span> markdown

Make a Table in Markdown

With Business Plan or higher, Use this tool.

With Personal Plan, you can use this code, or Google: HTML table 😀

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

If you have any questions, just click in button below!