CODE PUZZLE for Python and other languages

Laurent Abbal — Mon, 31 Jan 2022 13:10:26 +0000

Code Puzzle is a "Parsons puzzles" generator and manager.

With Code Puzzle you can create, save, modify and share Parsons puzzles (or Parsons problems).

According to Wikipedia : "Parsons problems are a form of an objective assessment in which respondents are asked to select from a selection of code fragments, some subset of which comprise the problem solution. The Parsons problem format is used in the learning and teaching of computer programming. Parson's programming puzzles became known as Parsons puzzles and then Parsons problems. Parsons problems have become popular as they are easier to grade than written code while capturing the students problem solving ability shown in a code creation process."

HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES

Laurent Abbal — Sun, 12 May 2019 12:46:14 +0000

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 :

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

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

DEV Community: Laurent Abbal

CODE PUZZLE for Python and other languages

HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES

1. Medium restrictions

2. The solution : kodeshot.net