November 24, 2021

Typora的一些扩展应用

Typora有一些扩展应用,可以说对于有些专业来讲,真的很顶。👍

1.$LaTeX$的应用

$LaTeX$主要是应用在文章公式排版上,具体是:

1.行内公式(inline):用 $...$括起公式,公式会出现在行内。

2.块间公式(display):用 $$...$$ 括起公式(注意 $$ 后需要换行),公式会默认显示在行中间。

比如一元二次方程:

$${a\mathop{{x}}\nolimits^{{2}}+bx+c=0}$$

$${a\mathop{{x}}\nolimits^{{2}}+bx+c=0}$$

又比如统计:

$$(\bar x) \bar x (\hat y=\hat ax + \hat b) \hat y=\hat a x + \hat b (\sum\limits_{i=1}^{n}{x_i}) \sum\limits_{i=1}^{n}{x_i}$$

$$(\bar x) \bar x (\hat y=\hat ax + \hat b) \hat y=\hat a x + \hat b (\sum\limits_{i=1}^{n}{x_i}) \sum\limits_{i=1}^{n}{x_i}$$

还有逻辑表示:

$$(\neg p:x^2\lt 1) \neg p:x^2\lt 1 (\forall x) \forall x (\exists y) \exists y (p\lor q \Rightarrow p \land q) p\lor q \Rightarrow p \land q ((p \to q)\land (p \gets q)) (p \to q)\land (p \gets q) (\Leftrightarrow) \Leftrightarrow (\Leftarrow) \Leftarrow$$

$$(\neg p:x^2\lt 1) \neg p:x^2\lt 1 (\forall x) \forall x (\exists y) \exists y (p\lor q \Rightarrow p \land q) p\lor q \Rightarrow p \land q ((p \to q)\land (p \gets q)) (p \to q)\land (p \gets q) (\Leftrightarrow) \Leftrightarrow (\Leftarrow) \Leftarrow$$

2.上标和下标表示

上标,例如X的平方:

<center>X<sup>2</sup></center>
X2

下标,例如水的分子式:

<center>H<sub>2</sub>O</center>
H2O

著名的质能转换公式(m指代静止质量时),就可以用上下标表示为:

<center>E<sub>0</sub>=mc<sup>2</sup></center>
E0=mc2

用$LaTeX$表示以上三个例子:

$$X^2$$
$${H_2O}$$
$$E_0=mc^2$$

$$X^2$$ $${H_2O}$$ $$E_0=mc^2$$

3.高亮表示

文字高亮:

如果早知道男生也会被<font color=blue>==性侵==</font>

如果早知道男生也会被==性侵==

英文单词高亮:

卧槽<font color=tomato>==what's up==</font>)

卧槽(==what’s up==)

代码高亮:

package main

import "<font color=yellow>==fmt==</font>"

func main() {
    fmt.Println(<font color=yellow>=="Hello, world"==</font>)
}

package main

import “==fmt==

func main() { fmt.Println(==“Hello, world”==) }

4.mermaid

4-1.序列图
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John
4-2.流程图
flowchart TB
    A & B--> C & D
flowchart TB A & B--> C & D
4-3.类图
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
classDiagram classA <|-- classB classC *-- classD classE o-- classF classG <-- classH classI -- classJ classK <.. classL classM <|.. classN classO .. classP
4-4.Gantt图
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2021-11-22, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2021-11-26  , 12d
    another task      : 24d
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2021-11-22, 30d Another task :after a1 , 20d section Another Task in sec :2021-11-26 , 12d another task : 24d
4-5.饼状图
pie title Pets adopted by volunteers
    "dog" : 386
    "cat" : 85
    "rat" : 15
pie title Pets adopted by volunteers "dog" : 386 "cat" : 85 "rat" : 15

5.GoAT 图 (Ascii)

5-1.环形
```goat
          .-.           .-.           .-.           .-.           .-.           .-.
         |   |         |   |         |   |         |   |         |   |         |   |
      .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
     |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
      '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
         |   |         |   |         |   |         |   |         |   |         |   |
          '-'           '-'           '-'           '-'           '-'           '-'
```
5-2.树状
```goat
          .               .                .               .--- 1          .-- 1     / 1
         / \              |                |           .---+            .-+         +
        /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
       +     +        |       |        |       |    ---+            ---+          +
      / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
     /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
     1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

```
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
5-3.网格
```goat
       ___     ___      .---+---+---+---+---.     .---+---+---+---.  .---.   .---.
   ___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
  /   \___/   \___/     +---+---+---+---+---+   +---+---+---+---+    +---+   +---+
  \___/ b \___/   \     |   |   | b |   |   |    \ / \a/ \b/ \ / \   |   +---+   |
  / a \___/   \___/     +---+---+---+---+---+     +---+---+---+---+  +---+ b +---+
  \___/   \___/   \     |   | a |   |   |   |    / \ / \ / \ / \ /   | a +---+   |
      \___/   \___/     '---+---+---+---+---'   '---+---+---+---'    '---'   '---'

```
a b a b a b a b
5-4.晶体振荡器电路图
```goat 
    CMOS or HCMOS inverter
              |\
           +--| >0---+----> OUT
           |  |/     |
           |         |
           +--\/\/\--+
           | 1 Mohm  |
           |         |
           |         \
           |         / 2.7 kohms
           |         \
           |         /
           |         |
           |   1MHz  |   parallel resonant
           +---|[]|--+
          _|_       _|_
  55pf    ___       ___  60pf
          _|_       _|_
          \ /       \ /                                            
 ```                                                 

5 5 C p M f O S o r H C 1 M O M 1 | S > M [ 0 h H ] i - m z | n - - v - - e r t 2 e . r 7 p 6 a 0 k r p O o a f U h l T m l s e l r e s o n a n t

6.表格

例如血型遗传表:

            血型遗传表

  | 父母血型 | 子女血型 | 不可能出现的血型 |
| :------: | :------: | :--------------: |
|   O+O    |    O     |      A,B,AB      |
|   O+A    |   A,O    |       B,AB       |
|   O+B    |   B,O    |       A,AB       |
|   O+AB   |   A,B    |       O,AB       |
|   A+A    |   A,O    |       AB,B       |
|   A+B    | A,B,AB,O |        /         |
|   A+AB   |  A,B,AB  |        O         |
|   B +B   |   B,O    |       A,AB       |
|   B+AB   |  A,B,AB  |        O         |
|  AB+AB   |  A,B,AB  |        O         |

血型遗传表

父母血型 子女血型 不可能出现的血型
O+O O A,B,AB
O+A A,O B,AB
O+B B,O A,AB
O+AB A,B O,AB
A+A A,O AB,B
A+B A,B,AB,O /
A+AB A,B,AB O
B +B B,O A,AB
B+AB A,B,AB O
AB+AB A,B,AB O

7.引入echarts图表库

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
 option = {
  legend: {
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
ECharts

作为初学者,今天已经码字码了这么多,其实Typora上的MD公式表格排版功能很有限,更多要去相关的网站找到代码在主题中配置才能实现(原博客主题不带这些功能,而我也懒得折腾其它带有这些功能的主题)。如果对数理公式.图表排版一类感兴趣的话。下面三个网站基本上能很好的帮你。只要按照网页上的做,基本上你也能和我一样做出漂亮的公式和图表,网站我会放在参考下面。


参考:1.mathjax2.mermaid3.echarts

达拉斯

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

©阿波尔的博客2019-2024