📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 前言
  • 1. shell方式
  • 2. 为什么丑
  • 3. 遇到的问题及做的尝试
  • 3.1 编码问题
  • 3.2 样式及客户端兼容问题
  • 4. 思路
  • 5. 最终实现
  • 5.1 gen.js
  • 5.2 gitlab.yml
  • 5.3 流程
  • 5.4 注意node与shell路径的差别
  • 参考资料

Was this helpful?

  1. WEB 开发,过往工作沉淀

Markdown 转 email

Previous前端调试指南Nextgithub travis ci 自动部署

Last updated 4 years ago

Was this helpful?

前言

组里在搞 code-review,最初每次 review 结束都是发一个当天 review 结果的 markdown 链接,后来同事觉得邮件里只有一个链接太单一了,希望能在邮件内容中加上review结果,慢慢的希望邮件中包含review出来的markdown内容。

1. shell方式

y同事先手起了一个应用,通过gitlab-ci的方式,在每次push的时候,执行shell脚本,读取markdown文件并通过pandoc将markown转为html,最后通过公司邮件服务发送出去,一切顺利。

直到有一天,组长觉得程序员应该有基本的审美,原因是邮件格式很丑..

2. 为什么丑

首先是因为,公司邮件服务是调用前需要申请邮件模板,由于偷懒(申请邮件服务比较麻烦),我们使用了之前另外一个应用的邮件模板。该模板最外层被<center>标签包裹,且被限制了宽度(700px),导致邮件内容挤在一起。

3. 遇到的问题及做的尝试

3.1 编码问题

最初不知道为什么内容会挤在一起,因为并不知道邮件模板的内容,基于前端的思维,我们希望能查看到审查邮件的元素。

但,mac自带邮件查看不到邮件源码。outlook能看到,但是看到的是被Quoted-printable编码之后的内容,编码方式可通过邮件中的源码 Content-transfer-encoding: quoted-printable得到。

在网上找到工具,解析出了熟悉的html标签。

3.2 样式及客户端兼容问题

对于样式问题,理所当然想到的是加<style>样式覆盖,权重不够就加!important。但还是会遇到样式与预期不符的情况,以及mac自带邮件与outlook表现不一致。甚至最终我们决定markdown文件全局使用table语法来写,以此解决对齐等问题。

4. 思路

按理说上面的方案已经能用了,虽说不好看但是也不会太丑,直到轮到我code review了,发现:

全局使用table语法写 markdown 太反人类了!

5. 最终实现

于是决定重写发送邮件的代码,采用 node 实现。

5.1 gen.js

const fs = require('fs')
const path = require('path')
const inlineCss = require('inline-css');
const request = require('request');

const showdown = require('showdown');
showdown.setOption('tables', true);  // true to convert table
const converter = new showdown.Converter();

const wrapContentWithHtml = str => `<!DOCTYPE html>
<html lang='en'>
<head>
  <style>
    // any style you want
  </style>
</head>
<body>
  ${str}
</body>
</html>`


const main = () => {
  return new Promise((res,rej) => {
    const mdContent = fs.readFileSync(path.resolve(__dirname, `./**.md`), {
      encoding: 'utf-8'
    });

    const wrappedHtml = wrapContentWithHtml(converter.makeHtml(mdContent));

    inlineCss(wrappedHtml, {
        url: '/'
      })
      .then(function (html) {
        res(html)
      }).catch(err => {
        rej(err)
      })
    })
}

main().then(html => {
    request({
      url:'邮件服务API',
      headers: {
        'Content-Type': 'application/json'
      },
      method:'post',
      body: JSON.stringify({
        content: html,
      })
    },(err,response,body) => {
      if(err){
        console.log("Error: ",err);
      } else {
        console.log("Send Mail Success!")
      }
    })
})

5.2 gitlab.yml

# one image with node environment, and container the npm packages like inline-css, showdown ..
image: image-***

test:
  script:
    - node ./gen.js
  only:
    variables:
      # do this job when commit message contains EMAIL, case sensitive
      - $CI_COMMIT_MESSAGE =~ /EMAIL/

5.3 流程

即当push代码之后,执行ci,ci镜像中执行node gen.js,因此要求镜像拥有node环境,以及相关的inline-css等npm package, 所以在镜像中有package.json文件,并已经执行了npm install。

5.4 注意node与shell路径的差别

第一种方式
node gen.js
/Users/jpsong/Desktop/code-review-sender/gen.js  // 相关路径

第二种方式
node code-review-sender/gen.js 
/Users/jpsong/Desktop/code-review-sender/gen.js  // 相关路径

第一种方式和第二种方式执行结果一样,即 node 只关心需要运行的js文件的路径。而shell,如ls, 是与在什么路径下执行该命令的有关。

因此对于shell脚本,可以放置在根目录,然后在 /build/project 下执行 /shell.sh,依然是可以获取到 /build/project目录的内容。

但如果gen.js文件在根目录下,在 /build/project 下执行 node /gen.js , 由于/build/project 与 /gen.js不是同一目录,所以会出现问题。 所以需要在 /build/project 中执行 node ./gen.js,才能访问到 /build/project 的内容。

参考资料

于是决定正儿八经处理这个问题,陆续查到一些资料表明,行内样式的html对邮件兼容性是最为友好的。同时了解到一个周刊类的也是通过解析 markdown 添加行内样式的方式实现的。

后来了解到 可以帮我们做到将样式抽取变为行内样式。

邮件编码解码
邮件格式化工具
inline-css
邮件编码解码工具
inline-css