sublime添加markdown粘贴图片功能

背景

技术沉淀对前端来说非常重要，总是有些东西时间久了容易忘记，那么就需要对平时学习掌握的东西进行总结和记录

一般做法

onenote
印象笔记

问题:

是共享性比较差，基本只有自己能看，不能和别人交流，万一总结的是错的还不能被发现。

一些程序员的做法

  • markdown

问题：

写普通的文本代码什么的非常轻松，但是要插入图片很麻烦（首先要保存图片到本地，或者将本地的图片上传到某个图片服务器，然后再引用）
粘贴网上的一些链接、列表什么的很麻烦，粘贴后需要按照markdown的语法修改

我的做法

markdown
使用github服务，自动部署到github上

痛点

通上，markdown的图片插入问题

解决办法

用electron做了一个markdown编辑器（已解决图片插入，html代码复制的一些问题）
编辑器太多不统一
功能没有sublime强大，继续开发浪费精力
sublime插件
sublime已经有了markdown的插件，支持语法高亮、预览、自动格式等等功能
缺少很重要的图片插入功能

sublime图片插入功能开发

  • 第一步非常简单
    tools-new plugin
  • 第二步ctrl+` 进行插件调试
    快捷键配置
    创建文件 Default (OSX).sublime-keymap
    1
    2
    3
    [
        {"keys":["alt+v"],"command":"copy_to_markdown"}
    ]

开发过程中的坑

sublime text 3和sublime text2有非常多的不同点
使用python3.3(语法与python2.6差别也很大)
osx中的sublime用的是单独的python编译环境，而不是系统自带的
更多区别

python有个模块Pil提供了剪切板里面图片操作的办法，如果是sublime text2安装python模块非常方便，系统直接安装即可，但是sublime 3的话就是用不到

python模块包安装方式

关于python包的各种安装方式

1
2
3
pip install -U richxerox
pip3.5 install Pillow
python3.3 -m easy_install --upgrade richxerox

python2.6，2.7等版本的通过pip或者easyinstall安装的模块路径如下：

1
/Library/Python/2.7/site-packages

python3.5等版本通过pip安装的模块路径如下：

1
/usr/local/lib/python3.5/site-packages/

sublime 3是自带的python环境，如何添加模块呢

找到模块所在的地方

python 查看模块安装地址

1
2
3
import amodule
import os
path = os.path.dirname(amodule.__file__)

将路径添加到sys.path

通过sys.path里面添加，可以是的sublime3的编译环境可以指到我们想要的地方

方法如下：

sublime中python环境变量配置查看

sublime的python中访问不到普通的python包，怎么办呢？

1
2
3
4
5
import sys 
import os
  # 这样就可以访问到request了
sys.path.append(os.path.join(os.path.dirname(__file__), "/usr/local/lib/python3.5/site-packages"))
import requests

现在可以引用到PIL库了
但是PIL中有些模块是.so格式的，sublime里的python环境引用不到
.so模块是c语言写的，属于动态库
.so模块的写法

终极解决办法

python中执行python脚本

需要注意的点，这里需要使用到python的绝对路径，sublime中，package存放路径和执行路径不一样

  • 插件存放路径：
    /Users/liuhui/Library/Application Support/Sublime Text 3/Packages
  • 执行路径：
    /Applications/Sublime Text.app/Contents/MacOS

    插件初始化配置

python 中安装pillow模块
安装插件
配置文件copyimagetomarkdown.sublime-settings里面添加一个图片保存路径即可

1
2
3
4
5
{
    
    "imageAbsolutePath":"/Users/liuhui/Desktop/mylab/blog/blog/source/images/test"
    
}

使用方式

  • 截屏
  • 在需要使用这张图片的地方张贴alt+v

效果演示

img

参考资料

sublime 插件开发参考地址
sublime插件开发api地址