我的第一篇博客-MarkDown的基本使用

MarkDown的基本使用

1.下载并安装Typora软件;下载地址:https://typora.io/。
2.新建test.txt文件,修改后缀为.md。
3.点击视图,选中大纲视图,即可显示大纲内容。
4.点击文件,点击偏好设置,点击外观,找到并选中侧边栏即可使得大纲视图变得可折叠。

一、标题

1.输入[# 标题名]后回车,可生成一级标题;以次类推,输入[## 标题名]后回车,可生成二级标题;
2.一共支持六级标题;可用快捷键[Ctrl+数字1-6]生成指定的标题等级。

二、字体

1.输入[**测试文本**]可将文本加粗显示;快捷键[Ctrl+B];
2.输入[*测试文本*]可将文本斜体显示;快捷键[Ctrl+I];
3.输入[***测试文本***]可将文本加粗斜体显示;快捷键[Ctrl+B+I];
4.输入[~~测试文本~~]可将文本中将加上删除线;快捷键[Alt+Shift+5];
5.输入[<u>测试文本</u>]可在文本下方显示下划线;快捷键[Ctrl+U];

三、引用

1.输入[> 引用内容]可引用别的文本内容;

四、分割线

1.输入[---]回车后显示分割线;
2.输入[***]回车后显示分割线;

五、图片

1.输入[![图片名称](本地图片路径)]即可显示本地的图片。
2.输入[![图片名称](网络图片路径)]即可显示本地的图片。

六、超链接

1.输入[[超链接文本](超链接url地址)]即可显示超链接;快捷键[Ctrl+Shift+I];

七、列表

1.有序列表:输入[1.+空格]回车即可生成有序列表;快捷键[Ctrl+Shift+[]
2.无序列表:输入[-+空格]回车即可生成无序列表;快捷键[Ctrl+Shift+]]

八、表格

输入[
|名字|性别|生日|
|----|----|----|
|张三|男|1977.01.01|
]回车后即可生成表格;快捷键[Ctrl+T];

九、代码

1.单行代码:输入[`代码文本`]回车后即可。
2.多行代码:输入[```java]回车后即可生成Java代码文本。

安装了`vue-markdown-loader`和`github-markdown-css`之后,在Vue项目中引入它们通常有以下步骤: 1. **安装依赖**: 使用npm或yarn添加这两个依赖: ```bash npm install --save-dev vue-loader vue-style-loader css-loader style-loader markdown-it marked github-markdown-css # 或者使用yarn yarn add -D vue-loader vue-style-loader css-loader style-loader markdown-it marked github-markdown-css ``` 2. **配置webpack**: 在`vue.config.js`(对于Vue CLI 3.x及以上)或主项目的`webpack.config.js`中,添加对应的loader规则,以便处理`.md`文件。这里假设你已经配置了一个名为`vue`的loader: ```javascript // vue.config.js (for Vue CLI 3.x) module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md$/) // 匹配.md文件 .use('vue-loader') // 使用vue-loader处理 .tap(options => ({ loader: 'vue-markdown-loader', options: { markdownItOptions: { html: true, // 允许html标签,适用于github-markdown-css use: ['@gfm/url', '@gfm/strikethrough'] // 添加支持的特性 }, highlight: true, // 启用代码高亮 css: [ path.resolve(__dirname, 'node_modules/github-markdown-css/css/github-markdown.css'), // 引入github-markdown-css ], }), })); }, }; ``` 或者在单独的`markdown-loader.js`文件中配置: ```javascript import MarkdownIt from 'markdown-it'; import prism from 'prismjs'; const mdLoader = { test: /\.md$/, use: [ { loader: 'vue-loader', options: { loaders: { markdown: { loader: 'vue-markdown-loader', options: { markdownIt: new MarkdownIt().use(prism), // ...其他选项... }, }, }, }, }, ], }; export default mdLoader; ``` 3. **引用组件**: 在需要使用`vue-markdown`的地方,直接引用即可: ```html <template> <div> <vue-markdown :content="yourMarkdownContent"></vue-markdown> </div> </template> ``` 完成上述步骤后,你应该能看到markdown文件的样式已经被github-markdown-css美化,包括代码块的样式了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值