feat: add how to use example yaml code

public/views/index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/styles/output.css" />
     <link rel="icon" href="../image/stupidMonkeyIcon.png" type="image/x-icon" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link href='../style/prism.css' rel='stylesheet' type='text/css' />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 
     <style>
@@ -191,10 +192,51 @@ <h2 class="text-3xl font-bold tracking-wider">Create monkeytype readme</h2>
         </div>
         <div class="mt-8 pb-16">
             <h2 class="text-3xl font-bold tracking-wider">How to use</h2>
+            <div class="mt-8">
+                <pre class="rounded-xl language-yaml line-numbers">
+                    <code>
+name: generate monkeytype readme svg
+
+on:
+schedule:
+    - cron: "0 */6 * * *" # every 6 hours
+workflow_dispatch:
+
+jobs:
+download-svg:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+        uses: actions/checkout@v3
+
+    - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+        node-version: '16.x'
+
+    - name: Download SVG
+        run: |
+        mkdir public
+        curl -o public/monkeytype-readme.svg https://monkeytype-readme.repl.co/generate-svg/YOUR_USERNAME/THEMES
+        curl -o public/monkeytype-readme-lb.svg https://monkeytype-readme.repl.co/generate-svg/YOUR_USERNAME/THEMES?lb=true
+        curl -o public/monkeytype-readme-pb.svg https://monkeytype-readme.repl.co/generate-svg/YOUR_USERNAME/THEMES?pb=true
+        curl -o public/monkeytype-readme-lb-pb.svg https://monkeytype-readme.repl.co/generate-svg/YOUR_USERNAME/THEMES?lbpb=true
+
+    - name: push monkeytype-readme.svg to the monkeytype-readme branch
+        uses: crazy-max/[email protected]
+        with:
+        target_branch: monkeytype-readme
+        build_dir: public
+        env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                    </code>
+                </pre>
+            </div>
         </div>
     </div>
 
     <script src="../script/index.js"></script>
+    <script src='../script/prism.js' type='text/javascript'></script>
     <script>
 
     </script>