docs: enhance README with usage instructions and example graph

README.md

@@ -15,26 +15,30 @@ L_AC = line(A, C);
 K_ABC = circle(A, B, C);
 ```
 
-## How to use 
+## How to use
 
 To create a graph create a code block with the language set to jessiecode. You can also use YAML frontmatter to set the width and height of the graph, or other attributes defined in the JSXGraph documentation.
 
-````
+````markdown
 ```jessiecode
 ---
-width: 700
-height: 500
-boundingBox: [-10, 10, 10, -10]
+width: 500
+height: 400
+boundingBox: [-5, 4, 5, -4]
 ---
-A = point(1, 0);
-B = point(-1, 0);
-C = point(0.2, 1.5);
-L_AB = line(A, B);
-L_AC = line(A, C);
-K_ABC = circle(A, B, C);
+A = point(3, -2);
+B = point(-3, -1);
+C = point(1, 3);
+line(A, B);
+segment(A, C);
+circle(A, B, C);
 ```
 ````
 
+And it will be rendered as:
+
+![Example graph](./images/00-how-to-use.png)
+
 ## Bugs
 
 If you find any bugs with this plugin please create a new issue so that they can be resolved.
@@ -45,7 +49,7 @@ If you want to contribute please create an issue or pull request.
 
 ## Attribution
 
-This plugin uses 
+This plugin uses
 
 - [JSXGraph](https://jsxgraph.org/wp/index.html)
 - [JessieCode](https://github.com/jsxgraph/JessieCode)