使用shell脚本标准化md文档中图片

使用shell脚本标准化md文档中图片

背景：

Typro的md文档，提交到gitee等web端后，路径不规范图片显示异常。

了解得知，web中的md解析器，路径中空格等特殊字符需URL转移。否者无法解析。

本文使用shell脚本标准化md文档中图片

图片添加./相对路径

gitee的md解析器，不带./路径不影响展示，添加相对路径只是为了前后设置一致

步骤分解

1. find ./ -name "*.md找到所有md文件

2. 使用sed替换，把](替换上相对路径 ](./。如把![image-2022](1234.assets/image-1234.png)转化为![image-2022](./1234.assets/image-1234.png)

特殊情况处理：

• 原始已经是![image-2022](./1234.assets/image-1234.png)的，会被处理为![image-2022](././1234.assets/image-1234.png)，需要重新复原
• 超连接的![超链接](http://www.)会被处理为![超链接](./http://www.)，需避免误修改

3. 最终脚本，直接粘贴即可使用

pattern="]("
replace="](.\\/"
find ./ -name "*.md"|xargs.exe -i sed -i s/"$pattern"/"$replace"/g {}

patternDouble="\\.\\/\\.\\/"
replaceDouble="\\.\\/"
find ./ -name "*.md"|xargs.exe -i sed -i s/"$patternDouble"/"$replaceDouble"/g {}

patternhttp="\\.\\/http"
replacehttp="http"
find ./ -name "*.md"|xargs.exe -i sed -i s/"$patternhttp"/"$replacehttp"/g {}

4 执行shell

替换效果

图片路径空格URL转移

gitee官方的解释是，md中链接等不可存在空格，需要urlencode。链接

实现shell

由于空格很多，我们需要得到图片所在的文件和对应行号、通过替换相应行号的空格。

grep 'image' -EIrn  ~/Documents/mybook/mybook/ --include="*.md" |grep '(' |grep ' '|awk -F:  '{printf "sed -i \"%d s/%s/%s/g\" \"%s\" \n" ,$2," ","%20",$1 }|"sh" '

步骤分解

1. grep出图片路径与所在行数，以便做替换

# -r 递归查找 -n显示行号 -I忽略二进制
# --include="*.md" 只搜索md文件
grep 'image' -Irn  ~/Documents/mybook/mybook/ --include="*.md" |grep '(' |grep ' '

2. 提取出文件路径和行号的对应关系

通过观察可知，grep使用:做间隔，我是用awk完后字符串分割

# -F 分割符、默认是空格
# OPS 
awk -F: 

已经拿到文件路径和行号的对应

3. 使用printf拼接出sed

使用占位符利于阅读

printf "sed -i \" %d s/%s/%s/g \" \"%s\" \n" ,$2," ","%20",$1

sed已经拼接oK

加上sh执行后效果

最终效果

图片正常展示

后记

1. awk的用法很巧妙，可以查看链接

2. typro默认的图片设置可以优化一下，以方便web浏览