Automatically create Images of Code Snippets using Selenium + Carbon

generate_code_images.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "source": [
    "# Automatically create Images of Code Snippets using Selenium + Carbon\n",
    "## Setup\n",
    "First we define the CARBON Url and specify the class of the Export Button from the carbon.now.sh website. We then define a function that generates the images by making the code url safe (escaping characters), using selenium to open the carbon website and click on the export button, then rename the downloaded file."
   ],
   "metadata": {
    "collapsed": false,
    "pycharm": {
     "name": "#%% md\n"
    }
   }
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "import urllib.parse\n",
    "from selenium import webdriver\n",
    "from selenium.webdriver.common.by import By\n",
    "from selenium.webdriver.chrome.options import Options\n",
    "\n",
    "CARBON = 'https://carbon.now.sh/?' \\\n",
    "         'bg=rgba%28201%2C201%2C201%2C1%29' \\\n",
    "         '&t=vscode' \\\n",
    "         '&wt=bw' \\\n",
    "         '&l=python' \\\n",
    "         '&width=879' \\\n",
    "         '&ds=false' \\\n",
    "         '&dsyoff=20px' \\\n",
    "         '&dsblur=68px' \\\n",
    "         '&wc=false' \\\n",
    "         '&wa=true' \\\n",
    "         '&pv=18px' \\\n",
    "         '&ph=18px' \\\n",
    "         '&ln=false' \\\n",
    "         '&fl=1' \\\n",
    "         '&fm=Hack' \\\n",
    "         '&fs=14px' \\\n",
    "         '&lh=199%25' \\\n",
    "         '&si=false' \\\n",
    "         '&es=2x' \\\n",
    "         '&wm=false' \\\n",
    "         '&code={code}'\n",
    "\n",
    "# class name of Export Button\n",
    "EXPORT_BUTTON_CLASS = \"jsx-2184717013\"\n",
    "\n",
    "def generate_code_snippet_image(code: str, file: str):\n",
    "    # make code url safe\n",
    "    safe_code = urllib.parse.quote_plus(code)\n",
    "\n",
    "    # set carbon url containing code\n",
    "    url = CARBON.format(code=safe_code)\n",
    "\n",
    "    # selenium webdriver\n",
    "    driver = webdriver.Chrome() # setup chrome\n",
    "    driver.get(url) # load carbon webpage\n",
    "    driver.find_element(By.CLASS_NAME, EXPORT_BUTTON_CLASS).click() # click on export image button\n",
    "\n",
    "    # wait while downloading and rename file\n",
    "    sleep(3)\n",
    "    downloads_folder = f\"{Path.home()}/Downloads\"\n",
    "    os.rename(os.path.join(downloads_folder, 'carbon.png'), os.path.join(downloads_folder,f\"{file}.png\"))\n",
    "    print(f\"generated {file}.png\")"
   ],
   "metadata": {
    "collapsed": false,
    "pycharm": {
     "name": "#%%\n"
    }
   }
  },
  {
   "cell_type": "markdown",
   "source": [
    "## Iterating over multiple files\n",
    "We can iterate over all files of the specified `parent_dir` and its subfolders to call the `generate_code_snippet_image()` function. I'm furthermore splitting the file contents into two images, seperated by the delimiter \"# # # # # # # # # # # #\"."
   ],
   "metadata": {
    "collapsed": false,
    "pycharm": {
     "name": "#%% md\n"
    }
   }
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "generated 89-334_tbd-code.png\n",
      "generated 89-334_tbd-task.png\n",
      "generated 189-1871-code.png\n",
      "generated 189-1871-task.png\n",
      "generated 49-76_alg-code.png\n",
      "generated 49-76_alg-task.png\n",
      "generated 10-945_tbd_alg-code.png\n",
      "generated 10-945_tbd_alg-task.png\n",
      "generated 10-181_tbd_alg-code.png\n",
      "generated 10-181_tbd_alg-task.png\n",
      "generated 49-935_tbd_alg-code.png\n",
      "generated 49-935_tbd_alg-task.png\n",
      "generated 189-1991-code.png\n",
      "generated 189-1991-task.png\n",
      "generated 49-510_tbd_alg-code.png\n",
      "generated 49-510_tbd_alg-task.png\n",
      "generated 204-152-code.png\n",
      "generated 204-152-task.png\n",
      "generated 10-145_tbd_alg-code.png\n",
      "generated 10-145_tbd_alg-task.png\n",
      "generated 126-2552-code.png\n",
      "generated 126-2552-task.png\n",
      "generated 10-44_tbd_alg-code.png\n",
      "generated 10-44_tbd_alg-task.png\n",
      "generated 10-437_tbd_alg-code.png\n",
      "generated 10-437_tbd_alg-task.png\n",
      "generated 49-888_tbd_alg-code.png\n",
      "generated 49-888_tbd_alg-task.png\n",
      "generated 10-258_tbd_alg-code.png\n",
      "generated 10-258_tbd_alg-task.png\n",
      "generated 10-936_tbd_alg-code.png\n",
      "generated 10-936_tbd_alg-task.png\n",
      "generated 49-297_tbd_alg-code.png\n",
      "generated 49-297_tbd_alg-task.png\n",
      "generated 49-941_tbd_alg-code.png\n",
      "generated 49-941_tbd_alg-task.png\n",
      "generated 324-14-code.png\n",
      "generated 324-14-task.png\n",
      "generated 10-142-code.png\n",
      "generated 10-142-task.png\n",
      "generated 366-143_tbd-code.png\n",
      "generated 366-143_tbd-task.png\n",
      "generated 446-129_tbd-code.png\n",
      "generated 446-129_tbd-task.png\n"
     ]
    }
   ],
   "source": [
    "import os\n",
    "from pathlib import Path\n",
    "parent_dir = \"./YOUR_CODE_FILES_DIRECTORY/\"\n",
    "\n",
    "for subdir, dirs, files in os.walk(parent_dir):\n",
    "    for file in files:\n",
    "        # ignore hidden & readme files\n",
    "        if file.startswith(\".\") or file == \"README.md\":\n",
    "            continue\n",
    "\n",
    "        # read code snippet and generate image\n",
    "        f = open(os.path.join(subdir, file), \"r\")\n",
    "        code = f.read()\n",
    "\n",
    "        try:\n",
    "            delimiter_index = code.find(\"# # # # # # # # # # # #\")\n",
    "            generate_code_snippet_image(code[:delimiter_index], f\"{file[:-3]}-code\")\n",
    "            generate_code_snippet_image(code[delimiter_index:], f\"{file[:-3]}-task\")\n",
    "        except Exception as e:\n",
    "            print(f\"Error occurred for {file}: {e}\")\n"
   ],
   "metadata": {
    "collapsed": false,
    "pycharm": {
     "name": "#%%\n"
    }
   }
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}

Sample Code Snippet:

# https://raw.githubusercontent.com/TheAlgorithms/Python/master/data_structures/binary_tree/fenwick_tree.py
class FenwickTree:
    def __init__(self, SIZE):  # create fenwick tree with size SIZE
        self.Size = SIZE
        self.ft = [0 for i in range(0, SIZE)]

    def update(self, i, val):  # update data (adding) in index i in O(lg N)
        while i < self.Size:
            self.ft[i] += val
            i += i & (-i)

    def query(self, i):  # query cumulative data from index 0 to i in O(lg N)
        ret = 0
        while i > 0:
            ret += self.ft[i]
            i -= i & (-i)
        return ret

# # # # # # # # # # # #
# # # TASK (EASY) # # #
# # # # # # # # # # # #

# What will be printed if you run the following code?

if __name__ == "__main__":
    f = FenwickTree(3)
    f.update(1, 10)
    f.update(2, 20)
    print(f.query(2))

# Solution (stdout):
#
# 20
# 20
# 24
# 20
# 15

Generated Images:

1. Code Image

2. Task Image