Markdown小记


一、图片操作

1. 调整插入的图片的位置

在Markdown语法中,插入图片默认位置是居中的,可是有时候还是需要居左或者居右一下滴,既然遇到了就记一下吧。

先记录一下下面页面中图片依然全部居中的问题

问题:在Typora中写好都显示没问题,提交上来以后都居中了

原因:hexo 的Metary主题在进行渲染的时候,对图片进行了居中操作。

下边的方法没问题。

(1)方法一

img标签中插入div标签中

  • <div align=left>(居左)
  • <div align=right>(居右)
  • <div align=center>(居中)

示例:

<div align=left>
    <img src="https://gitee.com/arvin-he/blog-img/raw/master/tag-img/wallpaper36.jpg" width=50% />
</div>    

效果:

(2)方法二

img标签中插入style属性,例如:style="margin-left:45px"。以右侧为基准可以插入style=“margin-right:45px”

示例:

<img src="https://gitee.com/arvin-he/blog-img/raw/master/tag-img/wallpaper36.jpg
" width=50% style="margin-left: 45px">

效果:

2. 调整图片大小

img标签中插入widthheight属性

例1:

<img src="https://gitee.com/arvin-he/blog-img/raw/master/tag-img/wallpaper36.jpg
" width=30%>

效果:

例2:

<img src="https://gitee.com/arvin-he/blog-img/raw/master/tag-img/wallpaper36.jpg
" width=100px height=100px>

效果:

总结:

  • 可以使用%百分比的形式,也可以使用像素单位px
  • 使用百分比的形式时,只需要写width属性即可
  • 使用px时,widthheight都需要写,更精准的控制图片大小

二、数学表达式

遇到数学表达式,该怎么写出来呢?

1. 幂运算

(1)HTML标签

例如:10的5次方

实现:

10<sup>5</sup>

效果: 105

(2)Markdown语法

例如:10的5次方

实现:

10^5^

效果:10^5^

2. Markdown中插入多行大括号公式

(1)方法1
$$ f(x)=\left\&#123;
\begin&#123;aligned&#125;
x & = & \cos(t) \\
y & = & \sin(t) \\
z & = & \frac xy
\end&#123;aligned&#125;
\right.
$$

效果:
$$
f(x)=\left{

\begin{aligned}

x & = & \cos(t) \

y & = & \sin(t) \

z & = & \frac xy

\end{aligned}

\right.
$$

(2)方法2
$$ F^&#123;HLLC&#125;=\left\&#123;
\begin&#123;array&#125;&#123;rcl&#125;
F_L       &      & &#123;0      <      S_L&#125;\\
F^*_L     &      & &#123;S_L \leq 0 < S_M&#125;\\
F^*_R     &      & &#123;S_M \leq 0 < S_R&#125;\\
F_R       &      & &#123;S_R \leq 0&#125;
\end&#123;array&#125; \right. $$

效果:
$$
F^{HLLC}=\left{
\begin{array}{rcl}
F_L & & {0 < S_L}\
F^_L & & {S_L \leq 0 < S_M}\
F^
_R & & {S_M \leq 0 < S_R}\
F_R & & {S_R \leq 0}
\end{array} \right.
$$

(3)方法3
$$f(x)=
\begin&#123;cases&#125;
0& \text&#123;x=0&#125;\\
1& \text&#123;x!=0&#125;
\end&#123;cases&#125;$$

效果:
$$
f(x)=
\begin{cases}
0& \text{x=0}\
1& \text{x!=0}
\end{cases}
$$


文章作者: Arvin He
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Arvin He !
评论
  目录