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
The result :
Another example :
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;
}
Top comments (3)
You can use codenext.io/. It is an easy to use code highlighter for medium codenext.io/. we will be coming up with an extension so you will never have to leave medium while creating post.
I use carbon.now.sh
Very nice solution. Thanks for sharing!