Markdown Syntax

Hyperlink

With {target="_blank"} added, the hyperlink will be opened in a new Tab

Markdown Preview Enhanced{target="_blank"}

Otherwise, it will be opened in current Tab

Markdown Preview Enhanced{target="_blank"}

You can right click and Open in Browser to try the two hyperlinks above.

Emoji & Font-Awesome

:smile:, :fa-car:

Front-matter

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
published:
---

Use VSCode snippets to generate Markdown front matter

File>Preference>Configure User Snippets>markdown.json(Markdown)

{
  // Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "fontmatters",
    "body": [
      "---",
      "title: ",
      "date: ",
      "urlname: ",
      "description: ",
      "tags:",
      "  - ",
      "categories:",
      "  - ",
      "katex: true",
      "toc_number: false",
      "top_img: false",
      "aside: false",
      "---",
    ],
    "description": "fontmatters for markdown"
  }
}

Type in fontmatters, followed with shortcut Ctrl+I or Ctrl+Space to trigger focusSuggestion, then press Enter or Tap to make it work.

Presentation

Presentation Writer{target="_blank"}

fontmatters

插入图片

HTML <img> 标签 | W3school
HTML <img> 标签的 height 和 width 属性 | W3school

使用 html 中的 <img alt="" src="" style="zoom:25%"/> 标签来实现对图片的缩放.

使用 html 中的 <div style="text-align:center"> ... </div> 来实现图片的居中显示

默认方式

1	![transformerblock](https://xiaophai-typora.oss-cn-shanghai.aliyuncs.com/transformerblock.png)

transformerblock

按照图像自身的百分比进行缩放，例如缩放 25%

1
2
3

<div style="text-align:center">
<img alt=transformerblock src="https://xiaophai-typora.oss-cn-shanghai.aliyuncs.com/transformerblock.png" style="zoom:25%"/>
</div>

按照浏览器自身的宽度进行自适应缩放 (推荐)

1
2
3

<div style="text-align:center">
<img alt=transformerblock src="https://xiaophai-typora.oss-cn-shanghai.aliyuncs.com/transformerblock.png" height="auto" width="50%"/>
</div>

PicGo

在 PicGo 的 Setting 中可以通过修改 “Picgo: Custom Output Format” 字段来设置图片自动上传后返回的链接格式, 例如默认返回格式

1	![${uploadedName}](${url})

1	<img src="https://example.com/xxx.jpg" alt="picName-2016-07-25">

可以对格式进行自定义, 例如采用 html 的语法

1	<div style="text-align:center">\n<img alt="${uploadedName}" src="${url}" style="zoom:25%"/>\n</div>

这样得到的是

1
2
3

<div style="text-align:center">
<img alt="picName-2016-07-25" src="https://example.com/xxx.jpg" style="zoom:25%"/>
</div>

建议采用的格式, 这样图片可以根据浏览器自身的宽度进行自适应缩放

1	<div style="text-align:center">\n<img alt="${uploadedName}" src="${url}" height="auto" width="75%"/>\n</div>

1
2
3

<div style="text-align:center">
<img alt="picName-2016-07-25" src="https://example.com/xxx.jpg" height="auto" width="75%"/>
</div>

为汉字注音

今こん日にちはwa

今日にちこんは