CSDN上传md的坑与解决方法

NikkoLKR

已于 2022-10-20 02:24:05 修改

阅读量1.8k

点赞数 4

文章标签：前端编辑器 python

于 2022-10-20 02:14:34 首次发布

本文链接：https://blog.csdn.net/qq_34760888/article/details/127418754

版权

文章目录

上传md文件的方法

CSDN支持直接上传本地Markdown文件

点击发布

进入撰写页面后选择使用MD编辑器

点击导入就可以选择直接上传本地的md文件

坑一、导入后错乱

比如像这样

（上图）对比我在Typora中写的内容（下图）能发现很明显是错乱了

因此这里建议各位使用另外一种方式 ->直接Ctrl+C Ctrl+V复制粘贴

这样子很明显就没有问题了

坑二、图片转存失败

如图

遇到这种情况有两种可能

图片是本地图片（一般都是这种）
外链图片真的有防盗链机制

对于有防盗链机制的外链图片就按它说的先保存后上传，当然最好的方式就是 ->截屏

而对于本地图片（即图片存放在你的电脑上）这种情况，参考我的另一篇博客Markdown+Typora使用教程_NikkoLKR的博客-CSDN博客

只需要给Typora设置一下图床，将图片存放于网络上就可以解决问题了

坑三、图片加载不出来

如图

这个情况一般是由于在Typora中调整了图片缩放导致的

像这两张图我都在Typora中调整为了50%大小

Typora自动将它转换为使用HTML标签，而其中的style中的zoom属性无法被CSDN识别，因此图片无法加载

解决方法有两种（前提：已经配置好图床）

最简单的方法 ->不缩放图片

这种方法固然有效，但是在CSDN中图片默认不会居中，而且全部都很大，不够美观

比较好的解决方法->使用python脚本转换
脚本代码往下翻
先说说这个脚本能够做什么

将图片缩放标签改为CSDN能够识别的形式
居中图片

用法也很简单

使用前需要配置Python环境，并且安装Python的PIL库

这些大家自行搜索教程，这里不再赘述

首先将我给的python文件放到要转换的md文件的同一目录下

点击文件管理器左上角的框框，输入cmd后回车，打开命令行

在cmd中输入一下内容并回车

python3 transform.py 你的md文件名.md

我这里想转换的是 PID.md 文件就输入如下命令

python3 transform.py PID.md

当看到以下内容时代表已经转换完成（图片比较多的话就耐心等待一下）

此时目录中会出现一个带有CSDN前缀的md文件

打开这个文件直接Ctrl+C Ctrl+V复制到CSDN的MD编辑器中

可以看到图片正常显示，并且跟（下图）源文件中的图片大小一致

（转换后的图片标签Typora不识别，所以反而图片大小有问题，但是上传到CSDN中图片大小是与源文件一致的）

Python脚本代码
这篇文章中的图片都是经过了这个脚本转换的

脚本采用了正则匹配来获取图片信息，学过python的同学应该比较熟悉了

代码参考了蔗理苦的博客-CSDN博客_typora调整图片大小

但是做了一定的修改，提高了易用性并且保证在当前的CSDN的MD编辑器中可用（他的源码有概率会出问题）

懒得新建python文件的同学在这里自行下载

新建文件的同学记得运行的时候修改为你自己的.py文件名

感兴趣的话自行研究代码

import io
import re
import sys
import urllib.request
from PIL import Image

def get_size(img_path):  # 根据图片链接获取图片的大小
    response = urllib.request.urlopen(img_path)
    temp_img = io.BytesIO(response.read())
    img = Image.open(temp_img)
    return img.size

def alter(s):  # 处理未修改大小的图片
    return "![](" + s.group(2) + "#pic_center)"

def alter_zoom(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    zoom_value = int(s.group(4)) / 100
    w, h = get_size(s.group(2))
    new_w, new_h = int(zoom_value * w), int(zoom_value * h)
    return "![](" + s.group(2) + "#pic_center" + f' ={new_w}x{new_h})'
    #return s.group(1) + s.group(2) + "#pic_center" + s.group(3) + f'width="{s.group(4)}%"' + s.group(5) #注释掉的这种方法不保证100%可以

def alter_zoom_empty(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    return "![](" + s.group(2) + "#pic_center)"

file_name = sys.argv[1]
with open("./" + file_name, "r", encoding="utf-8") as fin, open("./" + 'CSDN_' + file_name , "w", encoding="utf-8") as fout:
    pattern = re.compile(r"(!\[image-\d+]\()(.+)(\))")  # 未修改大小的图片的匹配规则
    pattern_zoom = re.compile(r'(<img src=")(.*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    pattern_zoom_empty = re.compile(r'(<img src=")(.*)(" .* )style="zoom:();"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    content = fin.read()  # 读取文件内容
    content1 = pattern.subn(alter, content)  # 第一次处理
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  # 第二次处理
    content3 = pattern_zoom_empty.subn(alter_zoom_empty, content2[0])  # 第三次处理
    fout.write(content3[0])  # 写入新文件
    print("原始图片替换次数：", content1[1])
    print("zoom 属性图片替换次数：", content2[1] + content3[1])
    print("总共替换次数：", content1[1] + content2[1] + content3[1])