In this post, I share some of the tricks that will Make the Markdown file better and more beautiful.
To color some text, we can use the font tag, which is deprecated in HTML5.
<font color="red">red text</font>We can also use the span tag:
<span style="color:blue">this is blue text</span>.To color entire paragraph, the p tag can be used:
<p style="color:red">This is a paragraph.</p>To center align image and set image size, we can combine the p tag and img tag:
<p align="center">
<img src="URL" width="800">
</p>The above HTML code will center the image and also set its width to 800 pixels.
Sometimes, it is handy to create some collapsible content to make the post concise. Like what is shown below.
import random
nums = list(range(100))
print(random.choices(nums, k=10))We can use the detail tag to achieve this:
<details>
<summary><font size="2" color="red">Click to show the code.</font></summary>
```
import random
nums = list(range(100))
print(random.choices(nums, k=10))
```
</details>Sometimes, we want to anchor a position in the post so that when the reader click its reference, they will be brought to the referred position. This can be achieved by using anchor tag. For example, click here to go to first section.
The code to achieve this is:
# <a name="color_text"></a>How to color text?
click [here](#color_text) to go to first section.This works both for Markdown headers and normal text in some Markdown flavor.
For some Markdown variant, to go to a header, remove all punctuations in the
header title and turn all text in header to lowever case and replace space with
-, click here to go to section 1.
To use backticks inside inline code blocks, we can use more backticks as the openning
and closing inline code delimiter. For example, to produce foo`, use the
following:
Since the usual delimiter for code block is three backticks, using three literal backticks inside the usual three-backtick code block will result in rendering problems.
To fix this problem we can use more backticks as the code block delimiter.
To create stylish component in Markdown, we may need a little bit CSS.
Below is a div element styled with CSS.
this is some demo text
We can use inline style or internal style to reproduce this effect.
Using style attribute inside a HTML tag. The code is:
<div style="color: #ff0000; background-color: #ffbaba; padding: 10px; border: 3px dashed; border-radius: 10px;">
this is some demo text
</div>We can also inline CSS in Markdown using HTML style tag.
The code is:
<style>
.demo {
color: #ff0000;
background-color: #FFBABA;
padding: 10px;
border: 3px dashed;
border-radius: 10px;
}
</style>
<div class="demo">
this is some demo text
</div>It will create exactly the same styled text.
Using the techniques discussed above. We can create beautiful text boxes with different styles.
Using inline style:
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;">
I am a success message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1;">
I am an error message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #31708f; background-color: #d9edf7; border-color: #bce8f1;">
<strong>ⓘ Info:<br/></strong> I am a info message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #8a6d3b;; background-color: #fcf8e3; border-color: #faebcc;">
<strong>⚠ Warning:<br/></strong> I am a warning message
</div>The produced text boxes are like this:
Using internal style (ideas are from here):
<style type="text/css">
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 5px 0;
margin-bottom: 20px;
padding: 10px;
border-radius: 5px 5px 5px 5px;
border: 2px solid transparent;
border-color: transparent;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div class="info-msg">
<i class="fa fa-info-circle"></i>
This is an info message.
</div>
<div class="success-msg">
<i class="fa fa-check"></i>
This is a success message.
</div>
<div class="warning-msg">
<i class="fa fa-warning"></i>
This is a warning message.
</div>
<div class="error-msg">
<i class="fa fa-times-circle"></i>
This is a error message.
</div>The produce text boxes are like:
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。