From 32926a385a4e386a17f61f5e525d942c96fe11e4 Mon Sep 17 00:00:00 2001
From: Josh Goldberg <josh@codecademy.com>
Date: Tue, 4 Feb 2020 09:15:24 -0500
Subject: [PATCH] Added section in Monarch docs for Inspect Tokens development
 helper

---
 website/monarch.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/website/monarch.html b/website/monarch.html
index 7880e7e04d..b7b87ff836 100644
--- a/website/monarch.html
+++ b/website/monarch.html
@@ -383,6 +383,17 @@ <h2 id="htmlembed">&Uuml;ber Advanced: complex embeddings with dynamic end tags<
 ],</pre>
     <p>Only when we find a matching end tag (outside a string), <code>$1==$S2</code>, we pop the state and exit the embedded mode. Note that we need <a href="#@rematch"><code class="dt">@rematch</code></a> since the editor is ignoring our token classes until we actually exit the embedded mode (and we handle the close tag again in the <code>@root</code> state).</p>
 
+    <p>&nbsp;</p>
+    <h2 id="htmlembed">Inspecting Tokens</h2>
+
+    <p>Monaco provides an <code>Inspect Tokens</code> tool in browsers to help identify the tokens parsed from source code.</p>
+    <p>To activate:</p>
+    <ol>
+      <li>Press <kbd>F1</kbd> while focused on a Monaco instance</li>
+      <li>Trigger the <code>Developer: Inspect Tokens</code> option</li>
+    </ol>
+
+    <p>This will show a display over the currently selected token for its language, token type, basic font style and colors, and selector you can target in your editor themes.</p>
     </div> <!-- documentation -->
   </div> <!-- main -->