经常写文章的人会发现微信公众号自带的编辑器不太好用。用它来格式化写好的文章往往要花上一两个小时，浪费了大量的时间和最终的格式化效果。也不是那么好。本文将介绍如何使用css、html来布局自己的微信公众号的样式。布局只需几秒钟即可完成。

知道

它是一种轻量级的标记语言，允许人们以易于读写的纯文本格式编写文档，然后将其转换为有效的 HTML 文档。

语法非常简单，5-10分钟就可以熟练使用。例如：

它还可以很好地处理代码块，如下所示：

具体使用可以参考下面的文章：

正是因为使用起来比较简单，才可以让我们把更多的精力投入到文章的内容上，而不是浪费在排版上。这里向您推荐几款免费编辑器，如下：

平台

Mac平台

如何使用css和html进行布局？

对于没有编程基础的人来说，这似乎很难做到，但我还是建议大家学习简单的css和html相关知识。只要记住简单地学习一下即可。为什么简单地学习一些东西就足够了？因为很多公众号上的款式是可以直接复制的。我们用一个简单的例子来告诉你如何复制别人现成的样式。

第一步：通过编辑器将刚刚写的文章导出为HTML格式，并保存在本地。以Mou为例如下图：

1-1.png

使用浏览器打开刚刚导出的html文件。您还可以选择使用文本编辑器（如Text）打开html文件，以便您可以修改和查找html源代码。

步骤2：使用电脑上的浏览器打开公众号中您想要复制样式的文章。比如你要复制这样一个样式，如下图：

1-2.png

样式是标题居中、下划线、有背景图片。我怎样才能复制它？很简单，右键单击鼠标，选择，你会看到如下图的内容：

1-3.png

1-4.png

重点关注我用红线绘制的区域。从红色区域1我们可以看到，文章标题使用了两个HTML标签：span，可以理解为块和区域，span可以理解为文本块。用于填充文本。了解了这一点后，当你看到红色区域2中有一个内置的URL时，你就可以猜测它应该是标题后面的背景图片。为了验证，我们取消前面的复选框，如下图：

1-5.png

取消后，我们会发现标题后面的背景图消失了，这证明了我们的猜测。同样可以找到——它是标题的下划线，也就是标题的颜色。

第三步：此时，你已经知道如何查看别人的样式了，那么如何让自己的标题看起来像这样呢？比如把h3标题（三级标题）改成刚才的样式。首先找到Text中的h3标签，如下图：

将其更改为以下内容：

这相当于完​​成步骤2中的1个红色区域并将h3标题放置在块中。然后找到h3样式标签，如下图：

将其更改为以下内容：

修改完成后，点击保存并刷新打开的页面。效果如下：

1-6.png

通过刚才的3步，你基本上就知道如何去模仿别人的风格了。剩下的就是多尝试几次，最后调整出自己想要的风格。我的微信公众号样式源码会在文末提供链接供大家下载。

如何将html源代码转换为富文本？

为了在微信公众号上正确显示样式文章，我们还需要将html源代码转换为富文本。如何转换呢？打开它，然后点击源代码，将html源代码粘贴到这里，然后点击源代码，将html源代码转换为富文本。如下图：

1-7.png

转换后的效果如下：

1-8.png

最后，也是最重要的一步，复制所有富文本，粘贴到微信公众号后台，然后发送到手机上进行预览，看看调整后的样式能否在手机上正确显示，由于微信公众号存在一些问题，不支持CSS样式，所以需要自己继续调试。分享一下我遇到的两个坑：

如图所示：

1-9 .jpeg

关于代码块显示不正确的问题，我查了很多资料，最后发现使用代码块的CSS样式可以完美解决这个问题。 CSS样式如下：

对于列表问题，只需更改样式即可，如下：

注意：当所有样式都正确显示后，需要记录下修改了哪些样式，稍后将使用程序自动替换它们。

如何用程序实现html样式的自动转换？

之前我们已经完成了所有风格的调整。如果我们每篇文章都调整一次样式，那对我们来说是浪费时间。我们可以使用程序自动处理风格调整。该方案的核心思想是（替换）。替换之前，首先要阅读html中的源代码，并将其转换为字符串。您可以使用 Java 语言中的文件操作来完成此操作。代码如下：

代码中需要特别注意的是，将行分隔符取出来，然后在每次读取行后进行拼接，以保证转换过程中换行符不会丢失，否则可能会在屏幕上显示不正确微信公众号，例如代码块展示。完整的转换程序将在文末提供链接地址供大家下载。

其他

在写这篇文章之前，我在网上找到了很多免费的微信公众号编辑器。基本上，他们提供了一些模板供您选择。例如96微信编辑器不提供文本转换的功能。最后我找到了一个可以将文本转换成微信公众号风格的软件，但是这个软件是收费的，所以我放弃了。最重要的一点是，这些软件提供的样式都不是我喜欢的，所以才出现了这篇文章。技术人应该利用技术让自己的生活更美好。

总结

科技是用来服务生活的。作为一名技术人员，我们应该用技术思维让我们的生活变得更美好。我们应该培养自己的技术思维来解决现实生活中遇到的问题。也许你就能解决每个人生活中的问题。这是互联网中遇到的常见问题，并且没有人使用技术来解决这个问题。恭喜你，你可以将手中的技术变现，也可以为自己的事业找到方向。言归正传，本文的思路如下图所示：

1-10头脑.png