Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)

简介: Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)

Typora获取


该软件是开源免费的,可直接到官网下载:Typora官网下载


一、Typora快捷方式介绍


ctrl+shift加上+号或-号:能够放大或缩小整篇笔记在Typora中的展示大小。


ctrl加上+号或-号:在笔记内标题上使用,能够增大或减小该行文字的标题格式。


ctrl+shift+`或``包裹:在一段文字上使用按键或者进行包裹就有行内代码样式。


typora中右击:Typora里的文档右击包含更加快捷的效果使用。


二、Markdown学习


1、Markdown 标题


语法如下:


# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题


2、Markdown 段落


段落如何换行?

在文字后面添加两个空格或换行即可!


斜体、粗体、粗斜体
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___


分隔线(四种创建方式)


* * *
*****
- - -
----------


删除线


~~删除线文字~~     使用两个~号包裹即可


下划线


<u>下划线内容</u> 添加u标签即可


脚注


语法格式(下面是效果): [^注明文本]


[^注明文本]


3、Markdown 列表(有序无序)


**无序列表:**使用+、*、-表示,后加空格


+ 第一项
+ 第二项
+ 第三项


有序列表:使用数字加上.和空格


1. 第一项
2. 第二项
3. 第三项


列表嵌套:只需要在子列表前加上四个空格即可


1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

4、区块,也就是引用


使用**>来表示区块,可以多层区块>>**,并且配合列表项(包含有序无序)进行操作


可以如下任意搭配:


>
> >
> 1.
> 2.
> +


5、代码块(区块代码以及段落代码)


区块代码:使用` `包裹
段落代码:使用``````包裹


6、链接


[链接名称](链接地址)
或者
<链接地址>


效果分别展示:


百度


https://www.baidu.com/


7、图片


普通的方式来放置图片:


![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")


使用HTML来展示图片(能够设置比例大小):


<img src="#" width="50%">


8、表格


语法格式:


|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |


设置表格的对齐格式:


----: 设置内容和标题栏居右对齐。

:— 设置内容和标题栏居左对齐。

:–: 设置内容和标题栏居中对齐。

特别注意点

为了上传至别的网站需要注意以下几点


在Typora中我们设置标题有时候会使用# 标题,接着回车就可以有标题样式了,注意#后一定要有空格,否则上传到其他平台会失效。

我们对一段文字进行加粗时,尽量加粗中不要有空格,中间不要有/杠不要有?号,不要有空格,否则上传至csdn等平台可能会失效粗体。


三、Typora的css样式修改


1、前提说明

打开调试模式


Typora的样式也是可以调试并进行修改的,我们在Typora中右击—检查元素即可进行调试



若是右击之后没有检查元素的,可以点击左上角文件—偏好设置—通用,勾选下面功能即可!!!



找到主题文件夹,根据对应主题进行修改


左上角文件—偏好设置,打开主题文件夹就可以看到多种主题的css文件,我们可以通过调试来进行修改样式效果!!!



2、样式修改


下面都是针对于github.css来进行修改的!!


【1】引用部分效果


修改如下:


blockquote {
  /** 原来颜色#dfe2e5 **/
    border-left: 4px solid #FBAB7E;
    padding: 0 15px;
    color: #777777;
}


效果:



【2】插入图片的路径样式


.md-image>.md-meta {
    /*border: 1px solid #ddd;*/
    border-radius: 3px;
    padding: 2px 0px 0px 4px;
    font-size: 0.9em;
    color: inherit;
  /*多出来部分*/
    box-shadow: 5px 7px 19px #c6d6e9;
    padding: 6px;
    border: 0.3px solid #000000;
    border-radius: 27px 18px;
}


效果:如下插入图片上方路径



【3】内部代码块修改长宽度


code {
    background-color: #f3f4f4;  
    padding: 4px 3px 1px 3px;
}


效果:



四、Typora自动上传图床


Typora最新版包含图片自动上传的功能,可与PicGo一起进行使用


这里不介绍picgo如何上传图片到图床,可见之前博客:使用码云 Gitee+PicGo来搭建个人图床,默认配置好了PicGo,直接下面操作


【1】打开PicGo,设置Server端口


点击PicGo设置—设置Server,设置端口号为36677,很重要很重要






【2】Typora偏好设置,并测试


打开Typora,点击文件—偏好设置,按照如下进行设置



我们接着点击验证图片上传选项,若如下就说明验证成功!!!



成功之后,直接复制图片到Typora中就可以直接自动上传到图床了!!!快去试试!


相关文章
|
3天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
2天前
|
移动开发 前端开发 HTML5
CSS 常用样式属性和字体图标
CSS 常用样式属性和字体图标
|
3天前
|
前端开发 iOS开发
通过css内修改input框placeholder样式
通过css内修改input框placeholder样式
12 1
|
6天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
2天前
|
Web App开发 存储 SQL
CSS3 常用样式
CSS3 常用样式
CSS3 常用样式
|
20天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
2天前
|
移动开发 前端开发 UED
CSS3 常用样式属性
CSS3 常用样式属性
|
3天前
|
移动开发 前端开发 HTML5
认识 CSS (基础选择器、字体样式)
认识 CSS (基础选择器、字体样式)
|
28天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1
|
1月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
33 1