超高颜值+丝滑体验+多端同步,技术人Markdown笔记的最佳实践

前言

本篇是一个小的经验篇,介绍下我平时用什么工具写笔记写文章的。

现在写东西当然主推 Markdown 语法了,比富文本要方便太多,现在大多数新闻博客类平台应该都支持Markdown的语法,即使不支持 Markdown 转富文本的方式也非常多,总之用Markdown写东西,简单、灵活、跨平台,对普通人来说上手成本低,对技术人更是不二之选,如果你还不知道什么是Markdown,那赶紧去了解下吧,Markdown官方教程

我是 Markdown 的重度使用者,平时无论是记笔记还是写文章基本每天都离不开,所以我对Markdown编辑器有比较高的使用需求。

需求

我需要写东西主要有以下几种场景:

  1. 工作记录
  2. 记录技术相关笔记
  3. 写文章,主要是技术类
  4. 技术之外的笔记(比如菜谱、旅游攻略、生活备忘)

所以对于工具有以下需求:

多端同步

  • 主要是公司办公电脑,和家里的个人电脑要同步,其次是pc端,ipad,手机同步

编辑体验

  • 编辑体验非常重要,用Markdown语法写,正常会有编辑区和预览区这种是体验最差的,一些优秀的编辑器会将两种融合一起,减少语法使用成本增强视觉效果。

视觉效果

  • 好的视觉效果大大增强阅读体验

插入图片

  • 文章里经常会夹带图片,图片如果存储在本地就会比较麻烦

Typora 最好用的 Markdown 编辑器

Markdown编辑器我尝试过非常多这次我只推荐一个,就是Typora,毫不夸张的说用了这么久,我没见过有其他哪个md编辑器的编辑体验和视觉效果是比他做的更好的了。

美中不足的就是Typora 现在已经收费,15美元一次买断不算便宜,以前免费的时候我一直用,收费后我用过一段时间其他的,因为以前写东西的需求没有这么多,现在写的多了Typora在写作体验上确实有很大帮助。

优点

  • 编辑即所见的编辑体验
  • 美观的样式
  • 丝滑流畅的体验
  • 可完全扩展的主题(官网有大量样式主题,或者完全自己开发css样式)
  • 收费后迭代的版本体验更加流畅舒适了

缺点

  • 收费,15美元买断
  • 纯本地编辑器,没有联网功能,无法做到多端同步

Typora收费后,我改用了有道云笔记,因为当时用起来体验还行,主要能通过账号多端联网同步,在pc和手机端都有不错的编辑体验。

但是我现在不得不公平公正的说一下现在的有道云笔记就是一坨💩。一大堆乱七八糟的内容,各种推广广告,操作卡顿慢半拍,打开个笔记 loading 几秒,炒个菜翻一翻记得菜谱菜都糊了。劝大家尽量不用。过阵子可能广告直接插你笔记里,整个看广告解锁笔记,太恶心了。枉我开过一年会员,越来越垃圾。

Typora 自定义主题样式

Typora 官网有大量主题可供选择,如果没有满意的还可以通过写css的方式完全自定义主题。

我在一个现有主题基础上,fork出一份,根据自己的喜好稍加改动,写了个新主题,欢迎使用。反正我觉得这个视觉效果我写东西是很舒服的。

特点

  • 深色主题,符合编码习惯的vscode样式风格。
  • 自适应加宽了内容编辑区,宽屏体验更好。
  • 色彩舒适,视觉体验好

具体可看:github地址:https://github.com/wwenj/typora-NB-theme

示例图

Typora 图片自动上传

Typora 对于文内的图片有多重解决方案,允许你在插入图片时自定义做一些操作,比如将所有图片放到统一目录下,或者统一上传图床。

通常来讲上传图片是最方便的,Typora 提供多种上传图床相关服务,只需要本地简单配置下就好了,具体请看:官方文档,图片上传到图片非常有利于内容的传播,要迁移到其他平台直接复制就好了。

Typora 跨端同步

Typora 只是个本地编辑器是没办法实现跨端的,那云端存储的问题只能自己解决,可以上传github、云盘、其他云端存储、甚至自建服务。

以我的经验这种要长久使用的东西,越简单越好,最简单的当然就是上传到 github 上,上传 github 对技术人员来讲非常简单,但有个很常见的问题就是很容易忘记提交,比如你在公司忘记提交,回家想继续写那就很难受了。

本地脚本同步

自动同步到 github 很简单写个脚本,定时每隔一小时自动上传一次,这个脚本一直在后台跑着就可以了,能完全避免忘记提交的问题。

javascript 复制代码
// git_auto_push.js
const { exec } = require('child_process');
const path = require('path');
​
const repoPath = '~/Desktop/myNode'; // 请替换为您的Git仓库路径
​
const pullAddCommit = () => {
    exec(`cd ${repoPath} && git pull && git add . && git commit -m "AUTO_PUSH"`, (error, stdout, stderr) => {
        if (error) {
            console.log('内容push失败:\n' + stderr);
        } else {
            console.log('内容push成功\n');
            console.log(stdout);
        }
    });
};
​
// 每小时执行一次
setInterval(pullAddCommit, 1000 * 60 * 60);
// 启动时立即执行一次
pullAddCommit(); 
​

开机自启动脚本

虽然脚本可以避免忘记提交,但是你可能忘记启动脚本,所以将脚本启动放在电脑的开机自启里,这样就永远不可能忘记同步了。我用 mac 为例将该脚本放到开机自启动执行。

  • 创建一个plist文件(例如:com.node.gitautopush.plist)并放置在 ~/Library/LaunchAgents/ 目录下。
  • 这个plist文件应该包含如下内容:
xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>com.node.gitautopush</string>
    <key>ProgramArguments</key>
    <array>
        <string>/usr/local/bin/node</string>
        <string>/Users/name/Desktop/myNote/push.js</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
    <key>StandardErrorPath</key>
    <string>/tmp/com.node.gitautopush.err</string>
    <key>StandardOutPath</key>
    <string>/tmp/com.node.gitautopush.out</string>
</dict>
</plist>
​
  • 打开终端并执行以下命令来加载任务:

    bash 复制代码
    launchctl load /Users/name/Library/LaunchAgents/com.node.gitautopush.plist

加入自启动任务前你一定要在命令行测试,保证该脚本能正常执行。

这样我们就完成了pc端的多端同步,并且没有任何心智负担。

手机端同步

Typora 是没有手机端的,所以手机端我就直接使用 Github App,Github 对于 Markdown 语法的渲染效果其实是很棒的,只不过如果有编辑的需求会稍微麻烦点,但也没办法,手机端去写 Markdown 本身就不太方便,而且我在手机是很少去专门写长文,很多时候只是记一些零散的东西,所以对我来说实际影响并不大。

总结

本文介绍了通过Typora编辑器 、自定义主题、上传图床、Github、自动化同步实现一套用 Markdown 语法写记录的最佳实践,唯一美中不足就是在手机端确实没有好的方式编辑 Markdown 。希望对你有帮助,如果你有更好的方式,也欢迎在评论区交流。

原创声明

原创文章,转载请注明作者和文章原链接 阿祖zu

相关推荐
HEX9CF17 分钟前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
凌云行者29 分钟前
使用rust写一个Web服务器——单线程版本
服务器·前端·rust
华农第一蒟蒻1 小时前
Java中JWT(JSON Web Token)的运用
java·前端·spring boot·json·token
积水成江1 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
___Dream1 小时前
【黑马软件测试三】web功能测试、抓包
前端·功能测试
金灰1 小时前
CSS3练习--电商web
前端·css·css3
人生の三重奏1 小时前
前端——js补充
开发语言·前端·javascript
Tandy12356_1 小时前
js逆向——webpack实战案例(一)
前端·javascript·安全·webpack
TonyH20021 小时前
webpack 4 的 30 个步骤构建 react 开发环境
前端·css·react.js·webpack·postcss·打包
你会发光哎u1 小时前
Webpack模式-Resolve-本地服务器
服务器·前端·webpack