Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
工作、生活中有很多寫文檔的需求,如何才能提高寫作效率?選擇合適的工具加恰當的方法。下面分享一些工具和方法,為你的寫作助力。
對于我來說MarkDown+思維導圖是一種效率極佳的寫作方式。思維導圖可以將我的思考清晰地展示出來,然后按照知識脈絡完善文章內容。文章寫作使用MarkDown ,MarkDown 編輯工具很多,經過使用比較我最終選擇 Typora + MindNode 。
Typora 正式版本已經開始付費,89元買斷機制,免費版可以下載歷史Beta版本。
正式版
有的時候,我們需要做文件的各種轉換以滿足展示的場景,比如 Markdown轉思維導圖。
思維導圖轉換為 Markdown ,MindNode 和 XMind 這兩個工具直接導出 Markdown格式文件即可。
使用 markmap 可以將 Markdown 轉換為可視化、可交互的 HTML 格式的思維導圖。
本文轉換出來的效果如下
mapmind
方式一:在線轉換(https://markmap.js.org/repl)粘貼 markdown 到編輯區就可以導出Html或SVG。
markmap
方式二:在 vscode 中使用,安裝插件(https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)
方式三:安裝 markmap-cli 命令工具。
npm install -g markmap-cli
# 轉換
markmap index.md -o index.html
一個強大的命令行工具 Pandoc,用于將文件從一種標記語言轉換為另一種標記語言。常用的標記語言包括 Markdown、ReStructuredText、HTML、LaTex、ePub 和 Microsoft Word DOCX。
在線轉換地址(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 轉 Html
pandoc index.md -o index.html -c Github.css
Markdown 轉 Word
pandoc index.md -o index.docx -c Github.css
Markdown 轉 PDF,PDF 轉換相對復雜一些。轉換分兩步驟,所以需要先安裝TeX Live 或者 MiKTeX 。
brew install texlive
pandoc index.md -o index.pdf
如果內容包含中文會出現如下報錯,這是因為 Pandoc 默認使用的 pdflatex 命令無法處理 Unicode 字符,我們需要使用 xelatex ,并通過 CJKmainfont 指定中文字體。可以通過 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
如果內容需要對圖表,方程式,表格和交叉引用進行編號,可以安裝 pandoc-crossref。安裝和語法如下:
brew install pandoc-crossref
# 轉換 PDF
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf
# 轉換 Html
pandoc -F pandoc-crossref index.md -o index.html
Pandoc 還支持 YAML 格式的 header,通過 header 可以指定文章的標題,作者,更新時間等信息,如下:
---
title: "文章標題"
author: "lixp"
date: 2022-06-11
---
代碼塊高亮
# 代碼塊高亮
pandoc --list-highlight-styles
# 顯示支持的語言
pandoc --list-highlight-languages
要使用語法高亮,Markdown 文件中的 block code 必須指定語言,同時在命令行使用--highlight-style 選項,例如:
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md --highlight-style espresso -o index.pdf
寫文檔時,畫圖對于大多數人來說都比較痛苦吧。我們可以利用Mermaid 幫我們快速制作出想要的各種圖等。它是一個基于 Javascript 的圖表繪制工具,通過解析類 Markdown 的文本語法來實現圖表的創建和動態修改。在線嘗試一下。下面介紹一下 Markdown 里面畫各種圖。
Mermaid詳細語法可查看:https://mermaid-js.github.io/mermaid
mermaid
橫向流程圖
```mermaid
graph LR
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]
```
grph_lr
豎向流程圖
```mermaid
graph TD
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]
```
graph_td
標準橫向流程圖
```flow
st=>start: 開始
op=>operation: 審批
cond=>condition: 年齡是否大于18
sub1=>subroutine: 返回審批
io=>inputoutput: 通過
e=>end: 結束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
flow_lr
標準豎向流程圖
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 通過
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
flow_td
```sequence
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎?
```
sequence
復雜時序圖
```sequence
Title: 標題:復雜使用
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎?
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```
sequence_td
UML標準時序圖:
```mermaid
%% 時序圖例子,-> 直線,-->虛線,->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎?
loop 健康檢查
王五->王五: 與疾病戰斗
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎么樣?
李四-->王五: 很好!
```
uml
```mermaid
%% 語法示例
gantt
dateFormat YYYY-MM-DD
title 軟件開發甘特圖
section 設計
需求 :done, des1, 2022-01-06,2014-01-08
原型 :active, des2, 2022-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2022-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 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
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
state
```mermaid
pie
"蘋果" : 386
"香蕉" : 85
"菠蘿" : 15
```
pie
```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 渲染成 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 創建,所以需要讓它支持圖表顯示。
創建 layouts/_default/_markup/render-codeblock-mermaid.html 文件并添加下面代碼:
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
然后在內容模板的底部(在 .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 }}
通過(https://arthursonzogni.com/Diagon/)這個網站可以快速生成ASCII值。然后通過hugo渲染,下面是幾個例子
流程圖
flow
編輯界面
command
展示項目目錄,安裝 tree,將ASCII粘貼進來即可,非常方便
brew install tree
image.png
如果上述畫圖不能滿足,也可以使用圖說在線制表,然后導出圖片。
不同的軟件和寫作平臺對 Markdown 圖表語法支持不一致。完整版可參考:
解鎖Markdown高級用法,提升寫作效率 - 編程碼農 - 一個很騷氣的程序員
ppSolution
劉志鵬| 昨天 04:03
如果 Markdown 尚未出現,我大概還在用 Word 來完成這篇文章:
我需要在擁擠的工具欄與文字區域之間反復切換以更換合適的字號;右鍵打開菜單,面對一堆選項,我卻只想引入一個超鏈接;插入圖片時或許還要思考如何能夠得到最合適的排版……折騰了一通,好了,我剛才想寫點什么來著……
顯然十年以前人們就曾想過改變這一低效的寫作方式,于是輕量級標記語言—— Markdown 也就應運而生。Markdown 的理念由 John Gruber 首次提出,而其基礎語法的制定與修補則由 Gruber 與 Aaron Swartz 二人協作完成。
隨著語法的完善與各種擴展的加入,Markdown 被越來越多的各行業文字工作者所推崇,微博也在前不久宣布「兼容 Markdown 協議開放給第三方」。那么,用 Markdown 寫作到底有何優點呢?
Markdown 的純文本特性意味著理論上我們可以在任何純文本編輯器(例如寫字板)中用 Markdown 進行寫作,碼字時只需依照規則鍵入特定的標記,便可實現非常多樣的排版效果。
無需各種菜單與工具欄,也免除了字體行距等排版元素的干擾,我們得以將精力更加集中于寫作本身,不錯過任何一次靈感的出現。
「易讀易寫」是 Markdown 的第一原則。掌握 Markdown 的基本語法只需幾分鐘,是為「易寫」;語法簡潔靈活,轉換為富文本或 HTML 等格式后依然可以保留原本的排版和閱讀體驗,是為「易讀」。如此看來,Markdown 的受歡迎也就不足為怪了。
以上僅為最基礎的 Markdown 語法介紹,事實上 Markdown 還有諸多功能擴展(例如腳注和表格、公式和流程圖)。如有詳細了解的意愿,可以前往 Markdown 官方文檔或各大 Markdown 編輯器(例如Byword)的幫助中進行查看。
盡管 Markdown 的語法規則已經顯著降低了工具本身對于寫作的影響,但選擇一個稱手的編輯器也無疑會大大提高的自己的寫作效率。
對于我而言,由于撰文流程大都是在 Mac OS 環境中完成的,偶爾會在特殊場合用手機記錄靈感或是續寫之前的文章,所以我希望能夠擁有一個足夠舒適的寫作氛圍,基礎的文檔管理功能以及兩設備間的穩定同步,權衡之下我使用了如下的工具搭配。
1. Byword #Mac
Byword 是我幾乎從接觸 Markdown 伊始便使用至今的一款 Markdown 編輯器。精致典雅的界面,打字機模式和段落聚焦相結合[1]能夠使我盡可能做到心無旁騖,而黑白兩套主題以及對于字體和頁面尺寸的調節則給予了我恰到好處的自定義空間。
導出方面,HTML、PDF、Word 等常見導出格式均已涵蓋。解鎖高級版本后,更是可以將文章直接 WordPress、Medium 等各大博客平臺。
然而相對其他編輯器來說,Byword 的缺點同樣顯而易見。不支持腳注與表格的快捷插入,也缺少像 iA Writer 按詞性分類統計這樣的殺手锏,雖然對我來說這些都并無大礙,卻使它注定入不了大多數 Power User 的法眼。
2. nvALT
其實要說 Byword 的最大局限性,還得算是文檔管理功能的缺失,基于這點我選用了 nvALT 來與之搭配。
nvALT 是國外知名開發者 Brett Tarpstra 的作品,應用中內置了文檔庫,可以通過添加多個標簽來進行管理,更能為多篇特定的文章添加調出的快捷鍵。
nvALT 的最大特色是頂部的搜索框,不僅可以在其中鍵入關鍵詞實現標簽的過濾與文章內容的搜索,而且輸入回車,便會以當前框中的語句為標題,快速創建一篇新文章。
拋去文檔庫不談,nvALT 自身全面的編輯選項與強大的獨立預覽窗口都使其稱得上是一款高質量的文字編輯應用,而 Simplenote 的加持也為文檔同步上了道雙重保險。
在設置中,我將外部編輯器設置為 Byword。這樣一來,先在 nvALT 中檢索創建文檔,后通過快捷鍵在貌美的 Byword 中進一步編輯便成了我日常寫作的必經流程。
3. 1Writer #iOS
能夠與 Dropbox 中的文章保持實時雙向同步是我對于手機端 Markdown 應用的剛需,1Writer在這一點上便做得足夠出色。對于文件夾之內的文檔搜索與標簽的支持也讓我能夠在手機上輕松實現文檔庫的管理。
與 Byword 的 iOS 版本相比,1Writer 鍵盤上方的可自定義擴展、對多項云服務的支持以及自帶瀏覽器的不俗表現都讓它實際的使用體驗更勝一籌,如今它也已經成為我在手機上續寫文章的第一選擇。
4. Drafts 4 #iOS
而在需要記錄轉瞬即逝的靈感時,我會在第一時間打開 Drafts 4,因為它能夠立即進入文字錄入狀態,也方便我之后對錄入的文字做進一步的分發處理。例如通過創建一個 Action,便可實現無需跳轉就能將正文內容附加到 dropbox 中特定文章的操作,非常方便。
同 1Writer 一樣,Drafts 鍵盤上方的自定義擴展也可以讓 Drafts4 變身成強大的 Markdown 編輯器。有關 Drafts4 的詳細功能,有興趣的讀者同樣可以瀏覽之前 AppSo 的測評文章。
桌面平臺
除去以上三款,同為 Brett Tarpstra 作品的 Marked2以及由國人開發的MWeb也都是很好的選擇。
移動平臺
Windows 上可供選擇的高質量 Markdown 編輯器中,MarkdownPad無疑是其中的佼佼者。MarkdownPad 不僅可以通過編寫 CSS 實現界面的完全自定義,而且支持雙欄實時預覽,快捷鍵和基本語法的支持自然也不在話下。
Web 端的使用場景固然不多,但也不是沒有精品存在:比如同樣支持雙欄預覽的 dillinger和馬克飛象。前者的界面風格清新素雅,能夠接入 Dropbox、Google Drive、Github 等各種云服務。后者可以將生成的文檔直接同步至綁定的印象筆記帳號,并包含多套主題,文章中的 Markdown 語法示例截圖也是取自于此。
iOS 方面,除了以上介紹的 1Writer 與 Drafts4,Editorial也是一款專注于 iOS 平臺的極為出色強大的作品。如果你在 Mac 上使用了 Ulysses 或 iA Writer 作為你的主力工具,那選擇他們各自在 iOS 中的「親兒子」將帶給你更加無縫的碼字體驗。
對于 Android 用戶來講,你同樣可以在商店中看到 iA Writer的身影,此外嚴格遵守 Material Design 的JotterPad也同樣備受好評。二者在功能上均足夠完善,并可與 Dropbox 同步,想要在手機上專心碼字的話可以在二者之間進行選擇。
如果僅是滿足自己偶爾記錄筆記的需求,那么還處于 Beta 版本的 Monospace Writer以及前不久剛支持 Markdown 的錘子便簽或許會更適合你。
大家好,今天為大家分享一個由 www.helloworld.net 網站開發并開源的一個非常好用的工具 html2md, 并且源碼已經開源,再遇到喜歡的文章,就可以只輸入一個url,就能轉換成markdown文件了,使用非常的簡單
現在好的技術文章確實多,每天各種技術群里,各種技術社區,有很多質量非常好的技術文章,于是我們就收藏了,可是問題來了,我們收藏到哪呢?
最可氣的是,我收藏的文章,可能過了10天后,作者把這個文章刪除了,我真是。。。。。無語了。。。。
所以,helloworld.net的創始人之一水手花了一個周末的時間,開發了一款這樣的小工具,使用很簡單,代碼也很簡單,并且將其開源了出去,非常的好用
而且helloworld.net也提供了官方的鏈接, 大家可以試用一下
html2md已經開源并托管在github上
地址: https://github.com/helloworld-Co/html2md
javascript 開發的,具體是用vue框架開發的,做前端開發的小伙伴們恭喜了
主要使用以下技術棧
- vue 前端三劍客之一,主張最少,具有高度靈活性的漸進式框架
- nuxt 通過利用 Vue.js 和 Node.js最佳實踐來構建高性能應用程序
- express 基于 Node.js 平臺,快速、開放、極簡的 Web 開發框架
- element-ui 宇宙第一 Vue 第三方組件庫,有不服?
- js-dom 一款可在 Node 環境下模擬瀏覽器的 API 的庫
- turndown 使用 JavaScript 將 HTML 轉換為 Markdown
- axios 易用、簡潔且高效的 http庫,支持瀏覽器和 Node 環境。
- mavon-editor 一款基于 Vue 的 markdown 編輯器,支持所見即所得
- sass 強大的 Css 預處理器之一
也可以下載源碼編譯直接可以跑起來的
具體步驟如下:
第一步:下載
git clone git@github.com:helloworld-Co/html2md.git
cd ./html2md
第二步:安裝
npm install
或者
yarn install
第三步:啟動
npm run dev
或者
yarn dev
是不是很簡單,由于時倉促,代碼難免有bug,歡迎提出,我們隨時修改
html2md只是www.helloworld.net官方開源的一個小工具,后續我們還會開發出其它的有用的工具或者一些軟件,做一個真正為程序員著想的開發者社區
最后 ,如果你趕興趣,可以關注一下我們
后面還會發布更多的關于IT技術,編程,創業,資訊相關的文章
*請認真填寫需求信息,我們會在24小時內與您取得聯系。