HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES

An easy way to display neat and beautiful source code with syntax highlighting in Medium articles.
With Kodeshot, in three quick steps, you can include a catchy representation of your source code.

1. Medium restrictions

Medium can display both inline and multi-line code blocks. But none of them supports syntax highlighting.

Example :

fig = plt.figure()
ax = fig.add_axes([0, 0, 1, 1], projection='3d')
ax.axis('off')
# prepare the axes limits
ax.set_xlim((-25, 25))
ax.set_ylim((-35, 35))
ax.set_zlim((5, 55))
def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
    """Compute the time-derivative of a Lorenz system."""
    x, y, z = x_y_z
    return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]
# Choose random starting points, uniformly distributed from -15 to 15
np.random.seed(1)
x0 = -15 + 30 * np.random.random((N, 3))

Enter fullscreen mode Exit fullscreen mode

This is convenient but not very pleasant to read.

2. The solution : kodeshot.net

On Kodeshot.net :

• copy your source code in the text area, customize your code and capture
• save the image
• drag and drop the image in your article

The result :

[1] Source code at the bottom of this page

Another example :

[2] Source code at the bottom of this page

You can change the font size, the width, the style, the corners…
This solution is quite straightforward, nicer than the solution proposed by Medium and nicer than a GitHub Gist embedded in the article.

And, if you want people to be able to copy and paste the source code, you can add under the image [x] Source code at the bottom of this page and, at the bottom of the article, display multi-line code blocks with your code (as I did in this article).

Source code
[1]

fig = plt.figure()
ax = fig.add_axes([0, 0, 1, 1], projection='3d')
ax.axis('off')
# prepare the axes limits
ax.set_xlim((-25, 25))
ax.set_ylim((-35, 35))
ax.set_zlim((5, 55))
def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
    """Compute the time-derivative of a Lorenz system."""
    x, y, z = x_y_z
    return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]
# Choose random starting points, uniformly distributed from -15 to 15
np.random.seed(1)
x0 = -15 + 30 * np.random.random((N, 3))

Enter fullscreen mode Exit fullscreen mode

[2]

protected function getMemcached($connectionId, array $credentials, array $options)
{
    $memcached = $this->createMemcachedInstance($connectionId);
if (count($credentials) === 2) {
        $this->setCredentials($memcached, $credentials);
    }
if (count($options)) {
        $memcached->setOptions($options);
    }
return $memcached;
}

Enter fullscreen mode Exit fullscreen mode

原文链接：HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES