# HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES

### Laurent Abbal ・2 min read

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))
```

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

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))
```

[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;
}
```

I use carbon.now.sh