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中就可以直接自动上传到图床了!!!快去试试!


相关文章
|
2月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
14天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
1月前
|
前端开发 JavaScript UED
|
2月前
|
iOS开发 MacOS Python
【10月更文挑战第1天】「Mac上学Python 1」入门篇1 - 安装Typora与Markdown编辑技巧
本篇将详细介绍如何在Mac系统上安装Typora这款简洁高效的Markdown编辑器,并学习Markdown常用语法。通过本篇,用户能够准备好记录学习笔记的工具,并掌握基本的文档编辑与排版技巧,为后续学习提供便利。
166 1
【10月更文挑战第1天】「Mac上学Python 1」入门篇1 - 安装Typora与Markdown编辑技巧
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
254 1
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
79 2
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
1月前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
115 1

热门文章

最新文章