提升 Evernote for Mac 的阅读体验

前言

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

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

目录

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 不支持 <code>，所以无法实现代码块的样式。但是用 下划线 这个样式来替代 代码块的样式，就可以实现『当文本被设置为下划线时显示为代码块效果』。

在 } 的后面添加代码

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。