整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          教你解鎖Markdown高級(jí)用法,提升寫作效率,建議收藏

          工作、生活中有很多寫文檔的需求,如何才能提高寫作效率?選擇合適的工具恰當(dāng)?shù)姆椒?/span>。下面分享一些工具和方法,為你的寫作助力。

          寫作工具

          對(duì)于我來(lái)說(shuō)MarkDown+思維導(dǎo)圖是一種效率極佳的寫作方式。思維導(dǎo)圖可以將我的思考清晰地展示出來(lái),然后按照知識(shí)脈絡(luò)完善文章內(nèi)容。文章寫作使用MarkDown ,MarkDown 編輯工具很多,經(jīng)過(guò)使用比較我最終選擇 Typora + MindNode 。

          Typora 正式版本已經(jīng)開始付費(fèi),89元買斷機(jī)制,免費(fèi)版可以下載歷史Beta版本。

          正式版

          文檔格式互轉(zhuǎn)

          有的時(shí)候,我們需要做文件的各種轉(zhuǎn)換以滿足展示的場(chǎng)景,比如 Markdown轉(zhuǎn)思維導(dǎo)圖。

          Mind to Markdown

          思維導(dǎo)圖轉(zhuǎn)換為 Markdown ,MindNode 和 XMind 這兩個(gè)工具直接導(dǎo)出 Markdown格式文件即可。

          Markdown to Mind

          使用 markmap 可以將 Markdown 轉(zhuǎn)換為可視化、可交互的 HTML 格式的思維導(dǎo)圖。

          本文轉(zhuǎn)換出來(lái)的效果如下

          mapmind

          方式一:在線轉(zhuǎn)換(https://markmap.js.org/repl)粘貼 markdown 到編輯區(qū)就可以導(dǎo)出Html或SVG。

          markmap

          方式二:在 vscode 中使用,安裝插件(https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)

          方式三:安裝 markmap-cli 命令工具。

          npm install -g markmap-cli
          # 轉(zhuǎn)換
          markmap index.md -o index.html
          

          萬(wàn)能轉(zhuǎn)換

          一個(gè)強(qiáng)大的命令行工具 Pandoc,用于將文件從一種標(biāo)記語(yǔ)言轉(zhuǎn)換為另一種標(biāo)記語(yǔ)言。常用的標(biāo)記語(yǔ)言包括 Markdown、ReStructuredText、HTML、LaTex、ePub 和 Microsoft Word DOCX。

          在線轉(zhuǎn)換地址(https://pandoc.org/try)。

          Mac上直接使用 brew 安裝

           brew install pandoc
          

          支持格式如下:

          Input formats:  native, json, markdown, markdown+lhs, rst, rst+lhs, docbook,
                          textile, html, latex, latex+lhs
                          
          Output formats: native, json, html, html5, html+lhs, html5+lhs, s5, slidy,
                          slideous, dzslides, docbook, opendocument, latex, latex+lhs,
                          beamer, beamer+lhs, context, texinfo, man, markdown,
                          markdown+lhs, plain, rst, rst+lhs, mediawiki, textile, rtf, org,
                          asciidoc, odt, docx, epub
          

          Markdown 轉(zhuǎn) Html

          pandoc index.md -o index.html -c Github.css
          

          Markdown 轉(zhuǎn) Word

          pandoc index.md -o index.docx -c Github.css
          

          Markdown 轉(zhuǎn) PDF,PDF 轉(zhuǎn)換相對(duì)復(fù)雜一些。轉(zhuǎn)換分兩步驟,所以需要先安裝TeX Live 或者 MiKTeX 。

          • 第一步, Markdown 文件被轉(zhuǎn)為 LaTeX 源文件。
          • 第二步,調(diào)用系統(tǒng) pdflatex (默認(rèn)使用), xelatex 或者其他 TeX 命令,將 .tex 格式文件轉(zhuǎn)換為最終的 PDF 文件。
          brew install texlive
          pandoc index.md -o index.pdf

          如果內(nèi)容包含中文會(huì)出現(xiàn)如下報(bào)錯(cuò),這是因?yàn)?Pandoc 默認(rèn)使用的 pdflatex 命令無(wú)法處理 Unicode 字符,我們需要使用 xelatex ,并通過(guò) CJKmainfont 指定中文字體。可以通過(guò) fc-list :lang=zh 命令查詢支持的中文字體。

          Error producing PDF.
          ! LaTeX Error: Unicode character 大 (U+5927)
                         not set up for use with LaTeX.

          Macos 下面我們選擇 PingFang SC。

          pandoc --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf
          

          如果內(nèi)容需要對(duì)圖表,方程式,表格和交叉引用進(jìn)行編號(hào),可以安裝 pandoc-crossref。安裝和語(yǔ)法如下:

          brew install pandoc-crossref
          • {#fig:label}: 圖片 圖片后{#fig:key_img} 標(biāo)記圖片引用Key,然后在需要引用的位置加上[@fig: key_img]
          • {#eq:label}: 公式 $$ math $${#eq:math}
          • {#sec:label}: 章節(jié)
          • {#tbl:label}: 表格
          # 轉(zhuǎn)換 PDF
          pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf
          
          # 轉(zhuǎn)換 Html
          pandoc -F pandoc-crossref index.md -o index.html

          Pandoc 還支持 YAML 格式的 header,通過(guò) header 可以指定文章的標(biāo)題,作者,更新時(shí)間等信息,如下:

          ---
          title: "文章標(biāo)題"
          author: "lixp"
          date: 2022-06-11
          ---

          代碼塊高亮

          # 代碼塊高亮
          pandoc --list-highlight-styles
          # 顯示支持的語(yǔ)言
          pandoc --list-highlight-languages

          要使用語(yǔ)法高亮,Markdown 文件中的 block code 必須指定語(yǔ)言,同時(shí)在命令行使用--highlight-style 選項(xiàng),例如:

          pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md --highlight-style espresso -o index.pdf

          各種畫圖

          寫文檔時(shí),畫圖對(duì)于大多數(shù)人來(lái)說(shuō)都比較痛苦吧。我們可以利用Mermaid 幫我們快速制作出想要的各種圖等。它是一個(gè)基于 Javascript 的圖表繪制工具,通過(guò)解析類 Markdown 的文本語(yǔ)法來(lái)實(shí)現(xiàn)圖表的創(chuàng)建和動(dòng)態(tài)修改。在線嘗試一下。下面介紹一下 Markdown 里面畫各種圖。

          Mermaid詳細(xì)語(yǔ)法可查看:https://mermaid-js.github.io/mermaid

          mermaid

          流程圖

          橫向流程圖

          ```mermaid
          graph LR
          A[開始] -->B(審批)
              B --> C{年齡?}
              C -->|年齡>=18| D[通過(guò)]
              C -->|年齡<18| E[拒絕]
          ```

          grph_lr

          豎向流程圖

          ```mermaid
          graph TD
          A[開始] -->B(審批)
              B --> C{年齡?}
              C -->|年齡>=18| D[通過(guò)]
              C -->|年齡<18| E[拒絕]
          ```

          graph_td

          標(biāo)準(zhǔn)橫向流程圖

          ```flow
          st=>start: 開始
          op=>operation: 審批
          cond=>condition: 年齡是否大于18
          sub1=>subroutine: 返回審批
          io=>inputoutput: 通過(guò)
          e=>end: 結(jié)束
          st(right)->op(right)->cond
          cond(yes)->io(bottom)->e
          cond(no)->sub1(right)->op
          ```

          flow_lr

          標(biāo)準(zhǔn)豎向流程圖

          ```flow
          st=>start: 開始框
          op=>operation: 處理框
          cond=>condition: 判斷框(是或否?)
          sub1=>subroutine: 子流程
          io=>inputoutput: 輸入輸出框
          e=>end: 通過(guò)
          st->op->cond
          cond(yes)->io->e
          cond(no)->sub1(right)->op
          ```

          flow_td

          時(shí)序圖

          ```sequence
          對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?(請(qǐng)求)
          Note right of 對(duì)象B: 對(duì)象B的描述
          Note left of 對(duì)象A: 對(duì)象A的描述(提示)
          對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
          對(duì)象A->對(duì)象B: 你真的好嗎?
          ```

          sequence

          復(fù)雜時(shí)序圖

          ```sequence
          Title: 標(biāo)題:復(fù)雜使用
          對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?(請(qǐng)求)
          Note right of 對(duì)象B: 對(duì)象B的描述
          Note left of 對(duì)象A: 對(duì)象A的描述(提示)
          對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
          對(duì)象B->小三: 你好嗎
          小三-->>對(duì)象A: 對(duì)象B找我了
          對(duì)象A->對(duì)象B: 你真的好嗎?
          Note over 小三,對(duì)象B: 我們是朋友
          participant C
          Note right of C: 沒(méi)人陪我玩
          ```

          sequence_td

          UML標(biāo)準(zhǔn)時(shí)序圖:

          ```mermaid
          %% 時(shí)序圖例子,-> 直線,-->虛線,->>實(shí)線箭頭
            sequenceDiagram
              participant 張三
              participant 李四
              張三->王五: 王五你好嗎?
              loop 健康檢查
                  王五->王五: 與疾病戰(zhàn)斗
              end
              Note right of 王五: 合理 食物 <br/>看醫(yī)生...
              李四-->>張三: 很好!
              王五->李四: 你怎么樣?
              李四-->王五: 很好!
          ```

          uml

          甘特圖

          ```mermaid
              %% 語(yǔ)法示例
                  gantt
                  dateFormat  YYYY-MM-DD
                  title 軟件開發(fā)甘特圖
                  section 設(shè)計(jì)
                  需求                      :done,    des1, 2022-01-06,2014-01-08
                  原型                      :active,  des2, 2022-01-09, 3d
                  UI設(shè)計(jì)                     :         des3, after des2, 5d
              未來(lái)任務(wù)                     :         des4, after des3, 5d
                  section 開發(fā)
                  學(xué)習(xí)準(zhǔn)備理解需求                      :crit, done, 2022-01-06,24h
                  設(shè)計(jì)框架                             :crit, done, after des2, 2d
                  開發(fā)                                 :crit, active, 3d
                  未來(lái)任務(wù)                              :crit, 5d
                  耍                                   :2d
                  section 測(cè)試
                  功能測(cè)試                              :active, a1, after des3, 3d
                  壓力測(cè)試                               :after a1  , 20h
                  測(cè)試報(bào)告                               : 48h
          ```

          gantt

          類圖

          ```mermaid
          classDiagram
                  class Account
                  Account : +String owner
              Account <|-- BankAccount
                  class BankAccount
              BankAccount : +String owner
              BankAccount : +Bigdecimal balance
              BankAccount : +deposit(amount)
              BankAccount : +withdrawl(amount)
          ```

          class

          狀態(tài)圖

          ```mermaid
          stateDiagram-v2
              [*] --> First
              state First {
                  [*] --> second
                  second --> [*]
              }
          ```

          state

          并圖

          ```mermaid
          pie
          "蘋果" : 386
          "香蕉" : 85
          "菠蘿" : 15
          ```

          pie

          用戶體驗(yàn)旅程圖

          ```mermaid
          journey
              title My working day
              section Go to work
                Make tea: 5: Me
                Go upstairs: 3: Me
                Do work: 1: Me, Cat
              section Go home
                Go downstairs: 5: Me
                Sit down: 3: Me
          ```

          journey

          Goat Ascii 圖

          Goat 可以將 ASCII 渲染成 SVG

          ```goat
          +-------------------+                           ^                      .---.
          |    A Box          |__.--.__    __.-->         |      .-.             |   |
          |                   |        '--'               v     | * |<---        |   |
          +-------------------+                                  '-'             |   |
                                 Round                                       *---(-. |
            .-----------------.  .-------.    .----------.         .-------.     | | |
           |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
           | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
           '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
              |            |   |    | '---.        |               '-------'       |       '-+------'
              |<---------->|   |    |      |       v                Interior                 |     ^
              '           <---'      '----'   .-----------.              ---.     .---       v     |
           .------------------.  Diag line    | .-------. +---.              \   /           .     |
           |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
           |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
           '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
              .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
              |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
              |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
           <--+---+-----'       |     /|\                                                    |  | 3 |
                                v                             not:line    'quotes'        .-'   '---'
            .-.             .---+--------.            /            A || B   *bold*       |        ^
           |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
            '-'             '---------+--'          /           Nor/is this.            ---
           ```
          

          goat

          讓Hugo支持圖表顯示

          我個(gè)人博客是使用 Hugo 創(chuàng)建,所以需要讓它支持圖表顯示。

          支持 mermaid

          創(chuàng)建 layouts/_default/_markup/render-codeblock-mermaid.html 文件并添加下面代碼:

          <div class="mermaid">
            {{- .Inner | safeHTML }}
          </div>
          {{ .Page.Store.Set "hasMermaid" true }}
          

          然后在內(nèi)容模板的底部(在 .Content 下方)添加下面代碼:

          {{ if .Page.Store.Get "hasMermaid" }}
            <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
            <script>
              mermaid.initialize({ startOnLoad: true });
            </script>
          {{ end }}
          

          自定義Goat

          通過(guò)(https://arthursonzogni.com/Diagon/)這個(gè)網(wǎng)站可以快速生成ASCII值。然后通過(guò)hugo渲染,下面是幾個(gè)例子

          流程圖



          flow

          編輯界面



          command

          展示項(xiàng)目目錄,安裝 tree,將ASCII粘貼進(jìn)來(lái)即可,非常方便

          brew install tree
          

          image.png

          如果上述畫圖不能滿足,也可以使用圖說(shuō)在線制表,然后導(dǎo)出圖片。

          不同的軟件和寫作平臺(tái)對(duì) Markdown 圖表語(yǔ)法支持不一致。完整版可參考:
          解鎖Markdown高級(jí)用法,提升寫作效率 - 編程碼農(nóng) - 一個(gè)很騷氣的程序員

          ppSolution

          劉志鵬| 昨天 04:03

          什么是 Markdown?

          如果 Markdown 尚未出現(xiàn),我大概還在用 Word 來(lái)完成這篇文章:

          我需要在擁擠的工具欄與文字區(qū)域之間反復(fù)切換以更換合適的字號(hào);右鍵打開菜單,面對(duì)一堆選項(xiàng),我卻只想引入一個(gè)超鏈接;插入圖片時(shí)或許還要思考如何能夠得到最合適的排版……折騰了一通,好了,我剛才想寫點(diǎn)什么來(lái)著……

          顯然十年以前人們就曾想過(guò)改變這一低效的寫作方式,于是輕量級(jí)標(biāo)記語(yǔ)言—— Markdown 也就應(yīng)運(yùn)而生。Markdown 的理念由 John Gruber 首次提出,而其基礎(chǔ)語(yǔ)法的制定與修補(bǔ)則由 Gruber 與 Aaron Swartz 二人協(xié)作完成。

          隨著語(yǔ)法的完善與各種擴(kuò)展的加入,Markdown 被越來(lái)越多的各行業(yè)文字工作者所推崇,微博也在前不久宣布「兼容 Markdown 協(xié)議開放給第三方」。那么,用 Markdown 寫作到底有何優(yōu)點(diǎn)呢?

          Markdown 的純文本特性意味著理論上我們可以在任何純文本編輯器(例如寫字板)中用 Markdown 進(jìn)行寫作,碼字時(shí)只需依照規(guī)則鍵入特定的標(biāo)記,便可實(shí)現(xiàn)非常多樣的排版效果。

          無(wú)需各種菜單與工具欄,也免除了字體行距等排版元素的干擾,我們得以將精力更加集中于寫作本身,不錯(cuò)過(guò)任何一次靈感的出現(xiàn)。

          易讀易寫」是 Markdown 的第一原則。掌握 Markdown 的基本語(yǔ)法只需幾分鐘,是為「易寫」;語(yǔ)法簡(jiǎn)潔靈活,轉(zhuǎn)換為富文本或 HTML 等格式后依然可以保留原本的排版和閱讀體驗(yàn),是為「易讀」。如此看來(lái),Markdown 的受歡迎也就不足為怪了。

          Markdown 語(yǔ)法說(shuō)明

          1. 在一段文本前加上 # 符號(hào),即可使其成為標(biāo)題。Markdown 共支持六級(jí)標(biāo)題,標(biāo)題級(jí)數(shù)與 # 的個(gè)數(shù)一一對(duì)應(yīng)。
          2. 在一段文本前加上 > 符號(hào),即可將其引用。
          3. 文字兩端分別插入一個(gè)星號(hào)使其 *傾斜*,插入兩個(gè)星號(hào)使其**加粗**,插入 ` 符號(hào)使其生成行內(nèi)代碼塊。
          4. 用 [文字](鏈接) 的格式為中括號(hào)內(nèi)的文字添加一段鏈接。插入圖片時(shí),在前者的開頭加上 ! 即可,即 ![可選文字](圖片鏈接)。
          5. Markdown 支持無(wú)序列表和有序列表,你可以使用 * 作為列表標(biāo)記生成無(wú)序列表,或是用數(shù)字加英語(yǔ)句號(hào)的組合 1. 來(lái)生成有序列表。
          6. 空白行中輸入 * * * 來(lái)生成分割線。

          以上僅為最基礎(chǔ)的 Markdown 語(yǔ)法介紹,事實(shí)上 Markdown 還有諸多功能擴(kuò)展(例如腳注和表格、公式和流程圖)。如有詳細(xì)了解的意愿,可以前往 Markdown 官方文檔或各大 Markdown 編輯器(例如Byword)的幫助中進(jìn)行查看。

          個(gè)人 Markdown 工作流

          盡管 Markdown 的語(yǔ)法規(guī)則已經(jīng)顯著降低了工具本身對(duì)于寫作的影響,但選擇一個(gè)稱手的編輯器也無(wú)疑會(huì)大大提高的自己的寫作效率。

          對(duì)于我而言,由于撰文流程大都是在 Mac OS 環(huán)境中完成的,偶爾會(huì)在特殊場(chǎng)合用手機(jī)記錄靈感或是續(xù)寫之前的文章,所以我希望能夠擁有一個(gè)足夠舒適的寫作氛圍,基礎(chǔ)的文檔管理功能以及兩設(shè)備間的穩(wěn)定同步,權(quán)衡之下我使用了如下的工具搭配。

          1. Byword #Mac

          Byword 是我?guī)缀鯊慕佑| Markdown 伊始便使用至今的一款 Markdown 編輯器。精致典雅的界面,打字機(jī)模式和段落聚焦相結(jié)合[1]能夠使我盡可能做到心無(wú)旁騖,而黑白兩套主題以及對(duì)于字體和頁(yè)面尺寸的調(diào)節(jié)則給予了我恰到好處的自定義空間。

          導(dǎo)出方面,HTML、PDF、Word 等常見導(dǎo)出格式均已涵蓋。解鎖高級(jí)版本后,更是可以將文章直接 WordPress、Medium 等各大博客平臺(tái)。

          然而相對(duì)其他編輯器來(lái)說(shuō),Byword 的缺點(diǎn)同樣顯而易見。不支持腳注與表格的快捷插入,也缺少像 iA Writer 按詞性分類統(tǒng)計(jì)這樣的殺手锏,雖然對(duì)我來(lái)說(shuō)這些都并無(wú)大礙,卻使它注定入不了大多數(shù) Power User 的法眼。

          2. nvALT

          其實(shí)要說(shuō) Byword 的最大局限性,還得算是文檔管理功能的缺失,基于這點(diǎn)我選用了 nvALT 來(lái)與之搭配。

          nvALT 是國(guó)外知名開發(fā)者 Brett Tarpstra 的作品,應(yīng)用中內(nèi)置了文檔庫(kù),可以通過(guò)添加多個(gè)標(biāo)簽來(lái)進(jìn)行管理,更能為多篇特定的文章添加調(diào)出的快捷鍵。

          nvALT 的最大特色是頂部的搜索框,不僅可以在其中鍵入關(guān)鍵詞實(shí)現(xiàn)標(biāo)簽的過(guò)濾與文章內(nèi)容的搜索,而且輸入回車,便會(huì)以當(dāng)前框中的語(yǔ)句為標(biāo)題,快速創(chuàng)建一篇新文章。

          拋去文檔庫(kù)不談,nvALT 自身全面的編輯選項(xiàng)與強(qiáng)大的獨(dú)立預(yù)覽窗口都使其稱得上是一款高質(zhì)量的文字編輯應(yīng)用,而 Simplenote 的加持也為文檔同步上了道雙重保險(xiǎn)。

          在設(shè)置中,我將外部編輯器設(shè)置為 Byword。這樣一來(lái),先在 nvALT 中檢索創(chuàng)建文檔,后通過(guò)快捷鍵在貌美的 Byword 中進(jìn)一步編輯便成了我日常寫作的必經(jīng)流程。

          3. 1Writer #iOS

          能夠與 Dropbox 中的文章保持實(shí)時(shí)雙向同步是我對(duì)于手機(jī)端 Markdown 應(yīng)用的剛需,1Writer在這一點(diǎn)上便做得足夠出色。對(duì)于文件夾之內(nèi)的文檔搜索與標(biāo)簽的支持也讓我能夠在手機(jī)上輕松實(shí)現(xiàn)文檔庫(kù)的管理。

          與 Byword 的 iOS 版本相比,1Writer 鍵盤上方的可自定義擴(kuò)展、對(duì)多項(xiàng)云服務(wù)的支持以及自帶瀏覽器的不俗表現(xiàn)都讓它實(shí)際的使用體驗(yàn)更勝一籌,如今它也已經(jīng)成為我在手機(jī)上續(xù)寫文章的第一選擇。

          4. Drafts 4 #iOS

          而在需要記錄轉(zhuǎn)瞬即逝的靈感時(shí),我會(huì)在第一時(shí)間打開 Drafts 4,因?yàn)樗軌蛄⒓催M(jìn)入文字錄入狀態(tài),也方便我之后對(duì)錄入的文字做進(jìn)一步的分發(fā)處理。例如通過(guò)創(chuàng)建一個(gè) Action,便可實(shí)現(xiàn)無(wú)需跳轉(zhuǎn)就能將正文內(nèi)容附加到 dropbox 中特定文章的操作,非常方便。

          同 1Writer 一樣,Drafts 鍵盤上方的自定義擴(kuò)展也可以讓 Drafts4 變身成強(qiáng)大的 Markdown 編輯器。有關(guān) Drafts4 的詳細(xì)功能,有興趣的讀者同樣可以瀏覽之前 AppSo 的測(cè)評(píng)文章。

          其他 Markdown 編輯器推薦

          桌面平臺(tái)

          • Ulysses– Mac 平臺(tái)首屈一指的 Markdown 編輯器,擁有更加專業(yè)的文檔庫(kù)管理,功能非常全面而不顯繁雜,不過(guò)其 50 刀的價(jià)格相對(duì)來(lái)說(shuō)也更加不菲。如果你對(duì)文字工作有著更高的需求,那么只它一個(gè),便已足夠。
          • iA Writer– 更新至 3.0 版本后,iA Writer 將兩版本合二為一,并加入了諸多新特性與手勢(shì)操作。值得一提的是,iA Writer 的正文字體仍舊無(wú)法被更換,不過(guò)萬(wàn)幸這款名為「Nitti」的字體的顯示效果還算不錯(cuò)。
          • Typora– 界面干凈整潔的免費(fèi)之選,「所見即所得」的呈現(xiàn)方式是它的最大特色,而支持?jǐn)?shù)學(xué)公式及表格的可視化插入與編輯相信也會(huì)解決不少人的痛點(diǎn)。

          除去以上三款,同為 Brett Tarpstra 作品的 Marked2以及由國(guó)人開發(fā)的MWeb也都是很好的選擇。

          移動(dòng)平臺(tái)

          Windows 上可供選擇的高質(zhì)量 Markdown 編輯器中,MarkdownPad無(wú)疑是其中的佼佼者。MarkdownPad 不僅可以通過(guò)編寫 CSS 實(shí)現(xiàn)界面的完全自定義,而且支持雙欄實(shí)時(shí)預(yù)覽,快捷鍵和基本語(yǔ)法的支持自然也不在話下。

          Web 端的使用場(chǎng)景固然不多,但也不是沒(méi)有精品存在:比如同樣支持雙欄預(yù)覽的 dillinger和馬克飛象。前者的界面風(fēng)格清新素雅,能夠接入 Dropbox、Google Drive、Github 等各種云服務(wù)。后者可以將生成的文檔直接同步至綁定的印象筆記帳號(hào),并包含多套主題,文章中的 Markdown 語(yǔ)法示例截圖也是取自于此。

          iOS 方面,除了以上介紹的 1Writer 與 Drafts4,Editorial也是一款專注于 iOS 平臺(tái)的極為出色強(qiáng)大的作品。如果你在 Mac 上使用了 Ulysses 或 iA Writer 作為你的主力工具,那選擇他們各自在 iOS 中的「親兒子」將帶給你更加無(wú)縫的碼字體驗(yàn)。

          對(duì)于 Android 用戶來(lái)講,你同樣可以在商店中看到 iA Writer的身影,此外嚴(yán)格遵守 Material Design 的JotterPad也同樣備受好評(píng)。二者在功能上均足夠完善,并可與 Dropbox 同步,想要在手機(jī)上專心碼字的話可以在二者之間進(jìn)行選擇。

          如果僅是滿足自己偶爾記錄筆記的需求,那么還處于 Beta 版本的 Monospace Writer以及前不久剛支持 Markdown 的錘子便簽或許會(huì)更適合你。

          1. 打字機(jī)模式使打字時(shí)光標(biāo)一直保持在屏幕中央,段聚焦功能則令除當(dāng)前段落以外的所有文本淡化。 ?

          個(gè)免費(fèi)的開源的html轉(zhuǎn)markdown語(yǔ)法的工具


          大家好,今天為大家分享一個(gè)由 www.helloworld.net 網(wǎng)站開發(fā)并開源的一個(gè)非常好用的工具 html2md, 并且源碼已經(jīng)開源,再遇到喜歡的文章,就可以只輸入一個(gè)url,就能轉(zhuǎn)換成markdown文件了,使用非常的簡(jiǎn)單


          現(xiàn)在好的技術(shù)文章確實(shí)多,每天各種技術(shù)群里,各種技術(shù)社區(qū),有很多質(zhì)量非常好的技術(shù)文章,于是我們就收藏了,可是問(wèn)題來(lái)了,我們收藏到哪呢?

          怎么收藏呢?

          1. 微信群里發(fā)的文章,我們可以收藏
          2. csdn中的技術(shù)文章我們也可以注冊(cè)一個(gè)賬號(hào)收藏
          3. helloworld.net技術(shù)社區(qū)里面的文章再注冊(cè)一個(gè)賬號(hào)收藏
            可是技術(shù)社區(qū)好多呢,每個(gè)社區(qū)都要注冊(cè)一個(gè)賬號(hào),收藏也是可以的,只不過(guò)不方便我們統(tǒng)一的管理,實(shí)在是不方便,當(dāng)然也有人用瀏覽器的收藏夾去收藏,比如我就是這樣做的,可是我們程序員大部分用的還是chrome瀏覽器,所以問(wèn)題來(lái)了,chrome瀏覽器登錄賬號(hào),必須要會(huì)科學(xué)上網(wǎng),也是很麻煩

          最可氣的是,我收藏的文章,可能過(guò)了10天后,作者把這個(gè)文章刪除了,我真是。。。。。無(wú)語(yǔ)了。。。。


          所以,helloworld.net的創(chuàng)始人之一水手花了一個(gè)周末的時(shí)間,開發(fā)了一款這樣的小工具,使用很簡(jiǎn)單,代碼也很簡(jiǎn)單,并且將其開源了出去,非常的好用
          而且
          helloworld.net也提供了官方的鏈接, 大家可以試用一下

          github地址呢?

          html2md已經(jīng)開源并托管在github上
          地址: https://github.com/helloworld-Co/html2md

          是用什么語(yǔ)言開發(fā)的?

          javascript 開發(fā)的,具體是用vue框架開發(fā)的,做前端開發(fā)的小伙伴們恭喜了

          主要使用以下技術(shù)棧

          - vue 前端三劍客之一,主張最少,具有高度靈活性的漸進(jìn)式框架
          - nuxt 通過(guò)利用 Vue.js 和 Node.js最佳實(shí)踐來(lái)構(gòu)建高性能應(yīng)用程序
          - express 基于 Node.js 平臺(tái),快速、開放、極簡(jiǎn)的 Web 開發(fā)框架
          - element-ui 宇宙第一 Vue 第三方組件庫(kù),有不服?
          - js-dom 一款可在 Node 環(huán)境下模擬瀏覽器的 API 的庫(kù)
          - turndown 使用 JavaScript 將 HTML 轉(zhuǎn)換為 Markdown
          - axios 易用、簡(jiǎn)潔且高效的 http庫(kù),支持瀏覽器和 Node 環(huán)境。
          - mavon-editor 一款基于 Vue 的 markdown 編輯器,支持所見即所得
          - sass 強(qiáng)大的 Css 預(yù)處理器之一

          使用教程,如下圖



          也可以下載源碼編譯直接可以跑起來(lái)的

          具體步驟如下:

          第一步:下載

          git clone git@github.com:helloworld-Co/html2md.git
          cd ./html2md

          第二步:安裝

          npm install
          或者
          yarn install

          第三步:?jiǎn)?dòng)

          npm run dev
          或者
          yarn dev

          是不是很簡(jiǎn)單,由于時(shí)倉(cāng)促,代碼難免有bug,歡迎提出,我們隨時(shí)修改

          html2md只是www.helloworld.net官方開源的一個(gè)小工具,后續(xù)我們還會(huì)開發(fā)出其它的有用的工具或者一些軟件,做一個(gè)真正為程序員著想的開發(fā)者社區(qū)


          最后 ,如果你趕興趣,可以關(guān)注一下我們

          后面還會(huì)發(fā)布更多的關(guān)于IT技術(shù),編程,創(chuàng)業(yè),資訊相關(guān)的文章


          上一篇:HTML基礎(chǔ)
          下一篇:HTML的顏色名
          主站蜘蛛池模板: 无码人妻久久一区二区三区蜜桃| 美女视频一区二区| 中文字幕在线一区二区三区| 极品尤物一区二区三区| 在线观看国产一区| 亚洲A∨精品一区二区三区| 国产情侣一区二区| 国产日韩一区二区三区| 久久久一区二区三区| 手机看片福利一区二区三区| 国产91精品一区| 精品国产天堂综合一区在线| 欧美av色香蕉一区二区蜜桃小说| 99精品国产高清一区二区麻豆| 久久99精品一区二区三区| 国产精品视频一区二区三区四| 成人精品一区二区三区中文字幕| 一区二区三区日本视频| 国产AV国片精品一区二区| 亚洲A∨精品一区二区三区| 精品伦精品一区二区三区视频| 日韩在线一区二区三区免费视频| 国产成人一区二区精品非洲| 日本高清天码一区在线播放| 国产精品日韩一区二区三区| 精彩视频一区二区三区| 亚洲一区二区高清| 精品国产免费一区二区三区香蕉| 精品视频一区二区三区在线观看| 午夜精品一区二区三区免费视频| 精品一区二区三区在线成人| 69福利视频一区二区| 亚洲综合一区无码精品| 日本高清天码一区在线播放| 夜夜精品无码一区二区三区| 成人精品视频一区二区三区不卡 | 精品一区二区久久久久久久网站| 在线精品亚洲一区二区三区| 中文人妻无码一区二区三区| 亚洲一区二区中文| 国产SUV精品一区二区四|