提升 Evernote for Mac 的阅读体验

前言

Evernote for Mac 的编辑器一直很烂，阅读体验不佳，排版效率低下。虽然一直心水为知笔记的Markdown排版，无奈Mac中的为知笔记属于战五渣，所以放弃了为知笔记。Chrome 的 Markdown Here 插件和 马克飞象 都尝试过，虽然排版很便利，不过多一个 App 终归是多一步操作。所以这是一篇如何通过改变 Evernote for Mac 本身显示的内容样式来提升阅读体验的文章。

注：每次更改保存后，需要重启 Evernote 才能看到效果。

附上下载链接:
en-mac-min.css
en-mac-min.js
替换前请先备份原始文件。

目录

1. 寻找 Evernote 的样式表
2. 更改全局字体颜色
3. 更改全局行高
4. 更改全局超链接为悬停时才出现下划线
5. 模拟行内代码块样式
6. 更改行间代码块样式
7. 最终效果对比

调整 Evernote 样式

STEP 1. 寻找 Evernote 的样式表

1. 打开 Finder，找到 应用程序 -> Evernote，对着 Evernote 右键，从菜单里点选 显示包内容；
2. 依次打开 Contents -> Resources -> common-editor-mac 文件夹，找到以下文件；
   • 6.10版本以上为ce.css
   • 6.10版本以下为en-mac-min.css
3. 右键 打开方式 -> 文本编辑 打开，会看到密密麻麻的代码，我们只需要用搜索功能找到如下代码即可

/*6.10版本以上*/
#en-note{
  position:relative;
  outline:0;
  min-height:210px;
  -webkit-touch-callout:text;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text
}

/*6.10版本以下*/
en-note {
  min-height: 210px;
  outline: none;
  position: relative;
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

STEP 2. 更改全局字体颜色

搜索到 STEP 1 中那一长条代码后，在代码的结尾处 } 符号前增加 ;color:#2c3f51，就可以改变全局字体的颜色；需要注意 color 前有一个 ; ，#2c3f51 为颜色的16进制表达方式，也可以写成 ;color:rgb(44,63,81) 。

示例

...user-select:text;color:#2c3f51}

STEP 3. 更改全局行高

在 STEP 2 增加的 ;color:#2c3f51 后紧跟着写 ;line-height: 1.6 ，1.6 为行高1.6倍的意思，也可以写作具体的数值，如 ;line-height: 24px。

示例

...user-select:text;color:#2c3f51;line-height:1.6}

STEP 4. 更改全局超链接为悬停时才出现下划线

直接复制以下代码，粘贴到 STEP 1 第三步搜索结果的 } 的后面即可

a{text-decoration:none;color:#1980e6;transition:background-colorease-in-out.15s,colorease-in-out.15s,border-colorease-in-out.15s}a:hover,a:focus{text-decoration:none;border-bottom:1pxsolid#1980e6;transition:background-colorease-in-out.15s,colorease-in-out.15s,border-colorease-in-out.15s}

示例

...user-select:text}a{text-decoration:none;color:#1980e6;transition:background-colorease-in-out.15s,colorease-in-out.15s,border-colorease-in-out.15s}a:hover,a:focus{text-decoration:none;border-bottom:1pxsolid#1980e6;transition:background-colorease-in-out.15s,colorease-in-out.15s,border-colorease-in-out.15s}

STEP 5. 模拟行内代码块样式

因为 Evernote 不支持 ，所以无法实现代码块的样式。但是用 下划线 这个样式来替代 代码块的样式，就可以实现『当文本被设置为下划线时显示为代码块效果』。

在 } 的后面添加代码

u{text-decoration:none;color:#c7254e;font-size:0.9em;background-color:#f9f2f4;border-radius:4px;white-space:normal;padding:2px4px}

示例

...user-select:text}u{text-decoration:none;color:#c7254e;font-size:0.9em;background-color:#f9f2f4;border-radius:4px;white-space:normal;padding:2px4px}

CSS代码释义

取消下划线：text-decoration: none;
文本色值： color: #c7254e;
文本大小： font-size: 0.9em;
背景色： background-color: #f9f2f4;
圆角： border-radius: 4px;
忽略空白： white-space: normal;
内边距： padding: 2px 4px;
过渡动画： transition: background-color ease-in-out .15s, color ease-in-out .15s, border-color ease-in-out .15s;

STEP 6. 更改行间代码块样式

Evernote 的代码块样式为浅色背景的方框配深灰色文字，由于平时习惯了深色背景搭配浅色的文字，所以想要调整行间代码块的样式。

在刚才编辑的文件旁有一个js文件

• 6.10版本以上为ce.js
• 6.10版本以下为en-mac-min.js

6.10版本以上

继续在刚才的ce.css文件中搜索 .en-code {，会找到一处结果，调整后的样式如下

.en-code {
  background-color: #333;
  padding: 2px 8px;
  font-family: monospace;
  box-sizing: border-box;
  padding: 8px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #f8f8f2;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #fbfaf8;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  background-position: initial initial;
  background-repeat: initial initial;
}

6.10版本以下

打开en-mac-min.js并搜索 codeblock: ture ，结果会显示有两处 codeblock: ture 且内容一致。

行间代码块的全部样式

{style:'-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;'}

调整其中的 color: rgb(51, 51, 51); 为 color: #f8f8f2; ，background-color: rgb(251, 250, 248); 为 background-color: #333; ，就能得到黑底白字的效果。

STEP 7. 最终效果对比

下图图左为印象笔记原本的样式，图中为修改后的样式，图右为在手机端查看的效果。

可见，对 css文件的修改只对本机有效，更新 Evernote 或更换机器后，效果就没有了。而对 js文件的修改会把效果带入到其它平台中，如 App 端的 Evernote。