add code highlight, fixes #9

Author: mireille-raad

Diff for: _includes/head.html

@@ -6,9 +6,12 @@
   <meta name="description" content="{{site.description}}">
   <!-- google fonts -->
   <link defer async href="https://fonts.googleapis.com/css?family=Fira+Sans|Sen:800&display=swap" rel="stylesheet">
-  <!-- stylesheet and webmanifest -->
+  <!-- stylesheet -->
   <link defer async rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/media.css" | relative_url }}">
+  <link defer async rel="stylesheet" href="{{ "/assets/monokai.css" | relative_url }}">
+ 
+  <!-- webmanifest -->
   <link rel="manifest" href="{{site.baseurl}}/manifest.webmanifest">
 
   {%- seo -%}

Diff for: _layouts/post.html

@@ -4,7 +4,7 @@
 
 <!-- header section -->
 <section class="bg-light">
-    <div class="w-80 m-auto">
+    <div class="w-md-80 m-auto">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         <mark class="post-date">{{ page.date | date: date_format }}</mark>
 

Diff for: _posts/2020-03-12-thing-explainer-parser.markdown

@@ -32,13 +32,12 @@ This list of steps introduces some new concepts like: tokens and abstract syntax
 ### Step 1: parsing source code into tokens
 
 The fastest way to understand what tokens are, is to see them. Conveniently, Python comes with a [tokenizer](https://docs.python.org/3/library/tokenize.html).   Here is what happen if I run the tokenizer on the function that I created earlier.  
-`$ python -m tokenize file.py`
-
 
+`$ python -m tokenize file.py`
 
 `file.py` has the function that I used in the previous example.
 
-```
+```python
 def add(x,y):
     return x+y
 ```
@@ -51,7 +50,7 @@ A picture IS worth a thousand word 😛 Those are the tokens. They are the basic
 
 If you want to sound fancy:
 - The tokens are the basic "lexical components"
-- The parsing process is called "Lexical Analysis"
+- The parsing process is called "lexical analysis"
 - The thing that does the process is a "lexer"
 
 Here is the link to the RustPython lexer.
@@ -71,34 +70,34 @@ In the previous step, if you add random stuff to your function and tokenize it,
 
 So don't hate on the whole interpreter when you get error messages! or at least don't hate on the tokenizer!
 
-To determine if the tokens are valid syntax, first you need a definition of what a valid syntax is. Python has a defined "grammar" or set of rules. The official reference is on [this link](https://docs.python.org/3/reference/grammar.html). There, you will find a machine readable file. You may read a book to know the rules of python, but words are too "fluffy", the machine needs a very strict set of rules encoded in a file. [This video](https://www.youtube.com/watch?v=KGMFvy2d5OI) explains the notation and the Python grammar.
+To determine if the tokens are valid syntax, first you need a definition of what a valid syntax is. Python has a defined "grammar" or set of rules. The official reference is on [this link](https://docs.python.org/3/reference/grammar.html). There, you will find a machine readable file. You may read a book to know the rules of python, but words are too "fluffy", an algorithm that verifies if rules are followed needs a very strict set of rules encoded in a file. [This video](https://www.youtube.com/watch?v=KGMFvy2d5OI) explains the Python grammar and the file's notation.
 As the presenter puts it, this is the spirit of the beast (python) and it is only ~10KB 😭 (compare that to the size of python books you had to read!)
 
 So, we have the rules or grammar of a programming language in a machine encoded format... now we need to write something that verifies that those rules were followed... This sounds like something that other people could use and like something that should exist as an open source project! 🤔
 
 Sure enough, there is a whole Rust framework called `LALRPOP`. It takes the tokens generated by the lexer, verifies the syntax and turns the tokens into an AST (Abstract Syntax Tree). More information and a tutorial can be found in the [LALRPOP book](https://lalrpop.github.io/lalrpop/README.html).
 
-RustPython does one nice extra thing on top of `LALRPOP `. It masks the errors and provides you with safer, nicer errors. You can see the code for this in `RustPython/parser/src/error.rs`
+RustPython does one nice extra thing on top of `LALRPOP`. It masks the errors and provides you with safer, nicer errors. You can see the code for this in `RustPython/parser/src/error.rs`
 
 **Using RustPython to generate an AST**
 
 You can do:  
 
-```
+```rust
  use rustpython_parser::{parser, ast};  
  let python_source = "print('Hello world')";  
  let python_ast = parser::parse_expression(python_source).unwrap();
 ```
 
 ## Recap 🥴 🥵
 
-As a recap, when you write a line of python code and "run it", here is what happens:
+As a recap, when you write a line of python code and "run it", here is what the RustPython interpreter does:
 
-**your code** (in `file.py` or interactive shell)  
- ⭣ parse the line of source code into tokens  
- ⭣ determine if the tokens are valid syntax  
- ⭣ create an Abstract Syntax Tree (AST)     
- ⭣ compile the AST into bytecode   
- **bytecode** (in `__pycache__/file.pyc` or in memory)  
+**INPUT: your code** (in `file.py` or interactive shell)  
+⬇️ parse the line of source code into tokens  
+⬇️ determine if the tokens are valid syntax  
+⬇️  create an Abstract Syntax Tree (AST)     
+⬇️  compile the AST into bytecode   
+**OUTPUT: bytecode** (in `__pycache__/file.pyc` or in memory)  
 
- The compiler is under **`RustPython/compiler`** we'll dive into the details in a next post. In the meantime, check out the parser source code in [RustPython/parser/](https://github.com/RustPython/RustPython/tree/master/parser).
+ The compiler is under **`RustPython/compiler`**. Keep an eye on the blog for a future post about the details or the compiler. In the meantime, check out the parser source code in [RustPython/parser/](https://github.com/RustPython/RustPython/tree/master/parser).

Diff for: assets/monokai.css

@@ -0,0 +1,65 @@
+.highlight pre { background-color: #272822; }
+.highlight .hll { background-color: #272822; }
+.highlight .c { color: #75715e } /* Comment */
+.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+.highlight .k { color: #66d9ef } /* Keyword */
+.highlight .l { color: #ae81ff } /* Literal */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #f92672 } /* Operator */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .cm { color: #75715e } /* Comment.Multiline */
+.highlight .cp { color: #75715e } /* Comment.Preproc */
+.highlight .c1 { color: #75715e } /* Comment.Single */
+.highlight .cs { color: #75715e } /* Comment.Special */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight .kn { color: #f92672 } /* Keyword.Namespace */
+.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight .kt { color: #66d9ef } /* Keyword.Type */
+.highlight .ld { color: #e6db74 } /* Literal.Date */
+.highlight .m { color: #ae81ff } /* Literal.Number */
+.highlight .s { color: #e6db74 } /* Literal.String */
+.highlight .na { color: #a6e22e } /* Name.Attribute */
+.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight .nc { color: #a6e22e } /* Name.Class */
+.highlight .no { color: #66d9ef } /* Name.Constant */
+.highlight .nd { color: #a6e22e } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #a6e22e } /* Name.Exception */
+.highlight .nf { color: #a6e22e } /* Name.Function */
+.highlight .nl { color: #f8f8f2 } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #a6e22e } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #f92672 } /* Name.Tag */
+.highlight .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight .ow { color: #f92672 } /* Operator.Word */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight .se { color: #ae81ff } /* Literal.String.Escape */
+.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+.highlight .gh { } /* Generic Heading & Diff Header */
+.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */