为什么我排版这么好看？怎么给文字变色的？

觉得自己太对得起这位小伙伴了，深夜更文，现在已经是半夜11点46分了。

有问必答

image.png

给出答案

这篇文章就来介绍一下怎么在掘金写出排版好看的文章。

首先大家要知道掘金的编辑器提供了这两个神器：Markdown主题和代码高亮样式。

非常的好用，使用合适的主题和代码高亮样式可以让我们文章的调性拉满，给读者更好的阅读体验。

Markdown主题

设置主题的位置如下：

image.png

我认为主题的选择不是千篇一律的，我们可以结合自己内容的特点选择合适的主题：

channing-cyan

比如：我去年年终总结的这篇主要是以叙述故事的方式写文章，行为不需要特别严谨，文风也是比较明快活泼的，所以我也使用了这种活泼的主题，富有表现力。

image.png

image.png

总结：

1. channing-cyan 主题非常吸引人，尤其是引用部分做了比较重的强调，适合面试总结、年终总结等故事叙述类的主题。
2. 个人感觉不太适合教程类的文章：因为主题对于内容来讲，有点喧宾夺主了。会因为主题的过度设计分散一部分注意力，而不能专注于内容本身。

示例链接

这篇文章：PHP转Go 2021年年中总结 使用了channing-cyan主题。

smartblue

我认为比较适合用于纯技术类文章的主题是：smartblue。这个主题比较好的做到了好看和实用的平衡点。

smartblue比juejin、github主题更富表现力，但是并没有像channing-cyan那样过度设计，导致分散视觉中心，更没有像greenwillow那么chou(三声)，嘘~。

image.png

总结：

1. 技术类文章比较严谨，分级和步骤比较重要。所以我们使用的主题不能太花哨，否则会影响读者整体的阅读体验，使用花哨的主题会给人一种形式大于内容的错觉。
2. 不仅不能太花哨，也不能太呆板，在掘金既然可以使用主题，就不要像在IDE中写markdown那样，别用傻大黑粗的样式了。
3. 拥抱smartblue吧

示例链接

Redis 如何批量设置过期时间？PIPLINE的使用

其他主题

我们可以在写完文章之后，在选择主题，根据自己的文章内容来决定，毕竟切换主题的成本是非常低的，主题只能起到锦上添花的作用，内容干货才是王道。

其他主题小伙伴可以自己去尝试摸索，我认为选择主体的基本原则就是：既不能太丑（傻大黑粗），也不能太花哨（喧宾夺主）。

还有一个原则：文章尽量不要总是换主题，这样能形成自己的一套风格；起码同一个系列的文章要坚持用一个主题。

代码高亮样式

选择合适的代码高亮样式，对于提高读者的阅读体验也非常有帮助。

掘金编辑器设置代码高亮样式的入口在这里：

image.png

先说结论

我个人是比较喜欢第一个风格：ally-dark。原因很简单，这个主题也做到了平衡：高亮清晰但是不抢眼，也很有科技感，颜色搭配有品位，不丑。

比如下面这段代码：读起来就很舒服，方法名、变量、静态、字符串等都一目了然。

//批量设置过期时间
public static function myPut(array $data, $ttl = 0)
{
    if (empty($data)) {
        return false;
    }

    $pipeline = Redis::connection('cache')
        ->multi(\Redis::PIPELINE);
    foreach ($data as $key => $value) {
        if (empty($value)) {
            continue;
        }
        if ($ttl == 0) {
            $pipeline->set(trim($key), $value);
        } else {
            $pipeline->set(trim($key), $value, $ttl);
        }
    }
    $pipeline->exec();
}
复制代码

注意点

有些小伙伴可能遇到过这个问题：明明设置了代码高亮效果，也正确写了代码段标记，为什么高亮效果不生效呢？

不要慌，我告诉你为什么。

你要这么操作：在代码段标记上语言类型，比如：Java、Go、PHP，这样编辑器才知道按照那个语言风格来展示高亮效果。

image.png

对应的效果如下：

Java的HelloWord

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
复制代码

Go的HelloWord

package main

import "fmt"

func main() {
    fmt.Println("hellword")
}
复制代码

PHP的HelloWord

<?php
echo "Hello world";
?>
复制代码

Python的HelloWord

print('Hello World!')
复制代码

配图

一图胜前言 --不知道谁说的，总之很有道理。

好的配图能把我们的文章质量提升一大步，能把复杂的事情讲明白、能吸引读者、能直击人心。

比如我这篇介绍Pipline原理的图：

image.png

再比如：

我这篇孙悟空自在极意功的配图，一定也吸引了不少读者。

image.png

强调和引用

我家门前有两棵树，一颗是枣树，还有一颗，也是枣树。--鲁迅说的

合理的使用加粗和引用，能帮助读者更快的捕获到重点内容，对读者非常友好

上面这段话我是这么排版的：

image.png

再好一点点

我一直深信一个原则：每天比昨天更好一点点，随着时间的沉淀，就能好很多。

我们写文章也一样，只要每次都多动动脑筋，写完之后别着急发布，放空一下自己，以读者的角度来读自己的文章，会有新的感受。

跟着自己的这种感受，去优化一下文章的排版，选择合适的主题、合适的代码高亮、该强调的地方强调、改说明的背景要说明。

除了我上面提到的这些，一定还有很多优化文章排版，提升读者阅读体验的小技巧，需要小伙伴们用心去寻找。找到后欢迎反哺我，哈哈。

长此以往，爆文一定能写出来。