欢迎使用 MWeb

Author： X
发布时间：October 26, 2021
102views
No comments
4547 words
Categories：随笔

<p>MWeb 是专业的 Markdown 写作、记笔记、静态博客生成软件，目前已支持 Mac，iPad 和 iPhone。MWeb 有以下特色：</p>
<h2><a id="%E8%BD%AF%E4%BB%B6%E6%9C%AC%E8%BA%AB%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>软件本身：</h2>
<ul>
<li>使用原生的 macOS 技术打造，追求与系统的完美结合。</li>
<li>原则上，首先是追求界面简洁和高性能，然后才是强大易用，功能全面。</li>
</ul>
<h2><a id="markdown%E8%AF%AD%E6%B3%95%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Markdown 语法：</h2>
<ul>
<li>使用 GitHub Flavored Markdown 语法，简称 GFM 语法。</li>
<li>支持表格、TOC、LaTeX、代码块、任务列表、脚注等。</li>
<li>画图库支持 mermaid, viz, ECharts, PlantUML, Sequence, Flow。</li>
</ul>
<h2><a id="markdown%E8%BE%85%E5%8A%A9%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Markdown 辅助：</h2>
<ul>
<li>支持截图并粘贴、复制并粘贴、拖拽等方式插入图片并直接显示在编辑器内。</li>
<li>在兼容 Markdown 语法的情况下支持设置图片宽度。</li>
<li>好用的表格插入和 LaTeX 书写辅助。</li>
</ul>
<h2><a id="markdown%E8%BE%93%E5%87%BA%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Markdown 输出：</h2>
<ul>
<li>支持导出为图片、HTML、Epub、PDF、RTF、Docx。</li>
<li>支持发布到 WordPress、支持 Metaweblog API 协议的服务、Wordpress.com、印象笔记（Evernote）、Blogger、Medium、Tumblr、语雀、Ghost、少数派 Matrix。</li>
<li>图片上传服务（图床）支持 Imgur、七牛云、又拍云、腾讯云 COS、阿里云 OSS、SM.MS和自定义的图床服务。</li>
</ul>
<h2><a id="markdown%E7%AC%94%E8%AE%B0%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Markdown 笔记：</h2>
<ul>
<li>强大的文档库支持分类树和标签管理文档，文档可归类于多个分类，可以把分类整个导出为 Epub、PDF 和生成静态网站。非常合适用于笔记、个人知识收集、管理和输出。</li>
<li>快速笔记：随意增加笔记及图片等素材，支持以天为单位把增加的素材组合在一个文档内，方便整理及记录历史收集情况。</li>
<li>快速搜索：目前已支持全局快捷键调出搜索。</li>
</ul>
<h2><a id="%E5%A4%96%E9%83%A8markdown%E6%96%87%E6%A1%A3%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>外部 Markdown 文档：</h2>
<ul>
<li>外部 Markdown 文档使用外部模式管理。外部模式使用目录树的方式编辑和管理你的 Markdown 文档，还能很好的支持 GitBook、Jekyll、Hexo 等等编辑和图片插入。</li>
</ul>
<h2><a id="mweb%E6%96%87%E6%A1%A3%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>MWeb 文档：</h2>
<p>如果要更详细了解 MWeb，建议你一定要去看一下官网的帮助文档，网址为：<span class="external-link"><a class="no-external-link" href="https://zh.mweb.im/help.html" target="_blank">https://zh.mweb.im/help.html<i data-feather='external-link'></i></a></span>。我们建议在使用文档库之前，一定要阅读一下 <span class="external-link"><a class="no-external-link" href="https://zh.mweb.im/mweb-library.html" target="_blank">MWeb 文档库详细介绍<i data-feather='external-link'></i></a></span> 这篇文章，以便更好的使用文档库。</p>
<h2><a id="%E5%B8%AE%E5%8A%A9%E6%88%91%E4%BB%AC%E6%94%B9%E8%BF%9Bmweb" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>帮助我们改进 MWeb</h2>
<p>如果你喜欢 MWeb，想让它变得更好，你可以：</p>
<ol>
<li>推荐 MWeb，让更多的人知道。</li>
<li>给我们发反馈和建议：<a href="mailto:coderforart+2333@gmail.com">coderforart+2333@gmail.com</a></li>
<li>在 Mac App Store 上评价 （如果是在 MAS 上购买的话）。</li>
</ol>
<h2><a id="gfm%E8%AF%AD%E6%B3%95%E7%AE%80%E4%BB%8B%E5%92%8C-mweb%E6%89%80%E6%94%AF%E6%8C%81%E7%9A%84%E6%89%A9%E5%B1%95%E8%AF%AD%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>GFM 语法简介和 MWeb 所支持的扩展语法</h2>
<h3><a id="%E5%9B%9E%E8%BD%A6%E8%BD%AC%E4%B8%BA%E6%8D%A2%E8%A1%8C" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>回车转为换行</h3>
<p>官方的语法规定结尾加 2 个以上空格加换行才会转成换行，也就是 <code>&lt;br /&gt;</code> 标签。MWeb 中有个选项可以直接把换行转成 <code>&lt;br /&gt;</code>，不用加上 2 个以上空格，这个选项默认是开启的。如果要关闭，请在设置页面关闭。</p>
<h3><a id="%E4%BB%BB%E5%8A%A1%E5%88%97%E8%A1%A8%EF%BC%88task-lists%EF%BC%89" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>任务列表（Task lists）</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">- [ ] 任务一 未做任务 `- + 空格 + [ ]`
- [x] 任务二 已做任务 `- + 空格 + [x]`
</code></pre>
<p>效果如下：</p>
<ul>
<li class="task-list-item"><input type="checkbox" disabled="" /> 任务一 未做任务 <code>- + 空格 + [ ]</code></li>
<li class="task-list-item"><input type="checkbox" checked="" disabled="" /> 任务二 已做任务 <code>- + 空格 + [x]</code></li>
</ul>
<h3><a id="%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F%E5%8F%8A%E5%AF%B9%E9%BD%90" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>图片大小及对齐</h3>
<p>官方和 GFM 都不支持图片大小设置，MWeb 引入的特别的语法来设置图片宽度。如：<code>![图片说明-w450](pic.jpg)</code> 这样表示设置图片宽度为 450。其中 -w450 为设置语法，生成 HTML 时会自动移除。w 表示设置宽度。 可以看出，MWeb 引入的语法的特点是兼容原来的语法和仅支持设置宽度。</p>
<p><img src="https://zh.mweb.im/asset/img/set-up-git.gif" alt="图片描述" style="width:140px;" /></p>
<h3><a id="%E5%A4%9A%E8%A1%8C%E6%88%96%E8%80%85%E4%B8%80%E6%AE%B5%E4%BB%A3%E7%A0%81" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>多行或者一段代码</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">```js
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }

}
```
</code></pre>
<p>效果如下：</p>
<pre><code class="language-js">function fancyAlert(arg) {
	if(arg) {
		$.facebox({div:'#foo'})
	}

}
</code></pre>
<p>这个语法目前在 MWeb 中使用，必须前后空一行，才会正确解析。我觉得，在写 Markdown 文档过程中，运用空行很有必要，基本上，块级元素（标题、列表、引用、代码块、表格、段落等），都建议前后空一行。</p>
<h3><a id="%E8%A1%A8%E6%A0%BC" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>表格</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">第一格表头 | 第二格表头
--------- | -------------
内容单元格 第一列第一格 | 内容单元格第二列第一格
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格
</code></pre>
<p>效果如下：</p>
<table>
<thead>
<tr>
<th>第一格表头</th>
<th>第二格表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容单元格 第一列第一格</td>
<td>内容单元格第二列第一格</td>
</tr>
<tr>
<td>内容单元格 第一列第二格 多加文字</td>
<td>内容单元格第二列第二格</td>
</tr>
</tbody>
</table>
<h3><a id="%E5%88%A0%E9%99%A4%E7%BA%BF" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>删除线</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">加删除线像这样用： ~~删除这些~~
</code></pre>
<p>效果如下：</p>
<p>加删除线像这样用： <del>删除这些</del></p>
<h3><a id="latex" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>LaTeX</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">块级公式：
```math
x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
```

行内公式： ``\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N``
</code></pre>
<p>效果如下（在设置页面中启用 LaTeX 才会看到效果）：</p>
<p>块级公式：</p>
<pre><code class="language-math">x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
</code></pre>
<p>行内公式： <code>\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N</code></p>
<p>注意：为了兼容 MWeb 3，也支持 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$<br />
和块级语法<br />
$$	x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$<br />
但是建议用新的语法。</p>
<h2><a id="mweb%E7%94%BB%E5%9B%BE" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>MWeb 画图</h2>
<h3><a id="mermaid" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>mermaid</h3>
<p>mermaid 是比较流行的画图库，它支持流程图、顺序图和甘特图，它的官网为：<span class="external-link"><a class="no-external-link" href="https://mermaidjs.github.io/" target="_blank">https://mermaidjs.github.io/<i data-feather='external-link'></i></a></span> ，在 MWeb 中使用 mermaid 的语法就是声明代码块的语言为 mermaid，代码块中再写上 mermaid 的画图语法即可，你可以把下面的语法复制到 MWeb 中查看效果。</p>
<pre><code class="language-plain_text">```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice-&gt;John: Hello John, how are you?
    loop Healthcheck
        John-&gt;John: Fight against hypochondria
    end
    Note right of John: Rational thoughts &lt;br/&gt;prevail...
    John--&gt;Alice: Great!
    John-&gt;Bob: How about you?
    Bob--&gt;John: Jolly good!
```
</code></pre>
<p><strong>效果如下：</strong></p>
<pre><code class="language-mermaid">sequenceDiagram
    participant Alice
    participant Bob
    Alice-&gt;John: Hello John, how are you?
    loop Healthcheck
        John-&gt;John: Fight against hypochondria
    end
    Note right of John: Rational thoughts &lt;br/&gt;prevail...
    John--&gt;Alice: Great!
    John-&gt;Bob: How about you?
    Bob--&gt;John: Jolly good!
</code></pre>
<h3><a id="echarts" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>echarts</h3>
<p>echarts 是百度出品的 js 画图库，它的网址为：<span class="external-link"><a class="no-external-link" href="https://echarts.apache.org/zh/index.html" target="_blank">https://echarts.apache.org/zh/index.html<i data-feather='external-link'></i></a></span>，功能非常强大，MWeb 支持 echarts 的一些基本的用法，太高级的不支持。你可以将以下语法复制到 MWeb 中进行尝试。你也可以去 <span class="external-link"><a class="no-external-link" href="https://echarts.apache.org/examples/zh/index.html" target="_blank">https://echarts.apache.org/examples/zh/index.html<i data-feather='external-link'></i></a></span> 这个网址查看一些例子，要注意的是 MWeb 只能解析 <code>option = {}</code> 这种简单的，不过应该是足够使用了。</p>
<pre><code class="language-plain_text">```echarts
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
```
</code></pre>
<p><strong>效果如下：</strong></p>
<pre><code class="language-echarts">option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
</code></pre>
<h3><a id="%E8%84%9A%E6%B3%A8%EF%BC%88footnote%EF%BC%89" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>脚注（Footnote）</h3>
<p>Markdown 语法：</p>
<pre><code class="language-plain_text">这是一个脚注：[^1]
</code></pre>
<p>效果如下：</p>
<p>这是一个脚注：<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup></p>
<h3><a id="%E6%B3%A8%E9%87%8A%E5%92%8C%E9%98%85%E8%AF%BB%E6%9B%B4%E5%A4%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>注释和阅读更多</h3>


<p><strong>注</strong> 阅读更多的功能只用在文档库生成静态网站或发布到 Wordpress 博客时，插入时注意要后空一行。</p>
<section class="footnotes">
<ol>
<li id="fn1">
<p>这里是脚注信息 <a href="#fnref1" class="footnote-backref">↩</a></p>
</li>
</ol>
</section>

Last modification：October 26th, 2021 at 11:53 pm

End

本文作者： X
文章标题：欢迎使用 MWeb
本文地址：https://xq00.top/archives/huan-ying-shi-yong-mweb.html
版权说明：若无注明，本文皆XQ' Blog原创，转载请保留文章出处。