A few things can be helpful for you when using Markdown Block in Squarespace.
Notes
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!
Hello Tuan,
this is Cris from Switzerland. I have been trying to change the color of an hypelink underline in a markdown block, but with no success. The only thing I have been able to do is changing the color of both, text and underline:
#block-yui_3_17_2_1_1620830017300_7249 h3 a{
color: #B2C332!important;
}
But how can I address the color of only the underline?
Thank you,
cris