Notes on Markdown

发表于 更新于 分类于 阅读次数：

记录学习Markdown的过程.

Markdown Cheat Sheet

Emoji

Emoji Cheat Sheet

Emoji emoticons listed on this page are supported on Campfire, GitHub, Basecamp, Redbooth, Trac, Flowdock, Sprint.ly, Kandan, Textbox.io, Kippt, Redmine, JabbR, Trello, Hall, Qiita, Zendesk, Ruby China, Grove, Idobata, NodeBB Forums, Slack, Streamup, OrganisedMinds, Hackpad, Cryptbin, Kato, Reportedly, Cheerful Ghost, IRCCloud, Dashcube, MyVideoGameList, Subrosa, Sococo, Quip, And Bang, Bonusly, Discourse, Ello, Twemoji Awesome, Got Chosen, Flow, ReadMe.io, esa, DBook, Groups.io, TeamworkChat, Damn Bugs, Let's Chat, Buildkite, ChatGrape, Dokuwiki, Usersnap, Discord, Status Hero, Morfy, Bitbucket, Gitter, Yellow, YouTube, Habitica and Mattermost

Full Emoji List

This chart provides a list of the Unicode emoji characters and sequences, with images from different vendors, CLDR name, date, source, and keywords. The ordering of the emoji and the annotations are based on Unicode CLDR data. Emoji sequences have more than one code point in the Code column. Recently-added emoji are marked by a ⊛ in the name and outlined images; their images may show as a group with “…” before and after.

Character Codes

Simple Icons

Over 2100 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org.

CV

CyC2018/Markdown-Resume

CarlossShi/markdown-resume

How to use floating image in HTML page?

Left and right align on same line

需求为双向对齐, 且能控制上下间距. 原回答还给了一个好看的Demo, 当设计复杂模块时可以参考.

1
2
3
4
<div id="expand-box-header">
   <span style="float: left;">Top left header</span> 
   <span style="float: right;">Top right header</span><br>
</div>
1
2
3
4
5
#expand-box-header
{
    margin-top: -10px;
    margin-bottom: -10px;
}

Emoji in Heading

搜索到的相关问题如Emojis in headings disappear when exported to PDF #3893, 但不是我遇到的情况.

在heading中写入把Typora自带的emoji之后导出pdf在SumatraPDF中打开会出现字符可选但不可见的情况, 这需要在theme.css中的对应heading中加入font-weight一项, 经尝试后各值的效果如下:

  • \([1, 549]\): 常规体, 显示正常
  • \([550, 599]\): 粗体, 显示正常
  • \([600, \infty)\cup\{0\}\): 粗体, 不显示
1
2
3
4
5
6
h2 {
    font-size: 1.4em;  /*1.75*/
    line-height: 1.3;  /*1.225*/
    border-bottom: 1px solid #eee;
    font-weight: 588;  /* [1, 549], [550, 599], [600, ∞)∪{0} */
}

.css

  • Six Ways to Style Blockquotes: Drop-Caps and Styled Lines
  • CSS border-left-style Property: border-left-style示例
  • CSS List Style: 20+ examples: list-style-type示例
  • Beautiful Custom List Styles Using Modern CSS: 只染色列表中的marker

English

  • [其他]作为行政区划的“街道”怎么翻译成英文？: Sub-district

Marp

  • Marp使用方括号中的内容来设置图片属性, 具体见image-syntax
  • Examples:
    • Introducing Marp's Gaia Theme - Speaker Deck

Markdown and image alignment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
img[alt$=">"] {
float: right;
}

img[alt$="<"] {
float: left;
}

img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
1
2
3
![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Change font size in markdown table | VSCode#217

1
2
3
4
5
<style scoped>
table {
  font-size: 13px;
}
</style>

页面居中

见Introducing Marp's Gaia Theme - Speaker Deck

1
2
3
4
5
---
<!-- _class: lead -->
## `lead` class
Apply contents centering. Useful for title slide.
---

Feature Request: Footnotes #150

1
2
3
4
5
6
7
8
9
10
<style>
blockquote {
    border-top: 0.1em dashed #555;
    font-size: 60%;
    margin-top: auto;
}
</style>
# Title
Text text text
> This is a footnote

HTML

How to add empty spaces into MD markdown readme on GitHub?

&nbsp;