前言
Evernote for Mac 的编辑器一直很烂，阅读体验不佳，排版效率低下。虽然一直心水为知笔记的Markdown排版，无奈Mac中的为知笔记属于战五渣，所以放弃了为知笔记。Chrome 的 Markdown Here 插件和 马克飞象 都尝试过，虽然排版很便利，不过多一个 App 终归是多一步操作。所以这是一篇如何通过改变 Evernote for Mac 本身显示的内容样式来提升阅读体验的文章。
注：每次更改保存后，需要重启 Evernote 才能看到效果。
附上下载链接:
en-mac-min.css
en-mac-min.js
替换前请先备份原始文件。
目录
- 寻找 Evernote 的样式表
- 更改全局字体颜色
- 更改全局行高
- 更改全局超链接为悬停时才出现下划线
- 模拟行内代码块样式
- 更改行间代码块样式
- 最终效果对比
调整 Evernote 样式
STEP 1. 寻找 Evernote 的样式表
- 打开 Finder，找到 应用程序 -> Evernote，对着 Evernote 右键，从菜单里点选 显示包内容；
- 依次打开 Contents -> Resources -> common-editor-mac 文件夹，找到以下文件；
- 6.10版本以上为ce.css
- 6.10版本以下为en-mac-min.css
- 右键 打开方式 -> 文本编辑 打开，会看到密密麻麻的代码，我们只需要用搜索功能找到如下代码即可
/*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。
