[Style guide] Added section on graphql api explorer

src/content/docs/style-guide/components/code.mdx

@@ -15,9 +15,9 @@ Write-Output "This one has a title!"
 ```js collapse={3-5}
 // Collapsing
 const foo = {
-  1: 1,
-  2: 2,
-  3: 3,
+	1: 1,
+	2: 2,
+	3: 3,
 };
 ```
 
@@ -80,11 +80,13 @@ index_name = "tutorial-index"
 ```
 ````
 
-## Playground
+## Workers Playground
 
 If you add the `playground` option to the opening code fence for a Worker example, it will
 add a "Run Worker in Playground" link that will take the user to the [Worker's playground](/workers/playground/)
 
+### Live demo
+
 ```js playground
 export default {
 	fetch() {
@@ -93,7 +95,9 @@ export default {
 };
 ```
 
-````mdx
+### How to use
+
+````mdx "playground"
 ```js playground
 export default {
 	fetch() {
@@ -102,3 +106,50 @@ export default {
 };
 ```
 ````
+
+## GraphQL API explorer
+
+If you add the `graphql-api-explorer` option to the opening code fence for a `graphql` code block, it will
+add a "Run in GraphQL API Explorer" link that will take the user to the [GraphQL API explorer](https://graphql.cloudflare.com/explorer).
+
+### Live demo
+
+```graphql graphql-api-explorer title="A GraphQL query"
+query ASingleDatasetExample($zoneTag: string, $start: Time, $end: Time) {
+	viewer {
+		zones(filter: { zoneTag: $zoneTag }) {
+			firewallEventsAdaptive(
+				filter: { datetime_gt: $start, datetime_lt: $end }
+				limit: 2
+				orderBy: [datetime_DESC]
+			) {
+				action
+				datetime
+				host: clientRequestHTTPHost
+			}
+		}
+	}
+}
+```
+
+### How to use
+
+````mdx "graphql-api-explorer"
+```graphql graphql-api-explorer title="A GraphQL query"
+query ASingleDatasetExample($zoneTag: string, $start: Time, $end: Time) {
+	viewer {
+		zones(filter: { zoneTag: $zoneTag }) {
+			firewallEventsAdaptive(
+				filter: { datetime_gt: $start, datetime_lt: $end }
+				limit: 2
+				orderBy: [datetime_DESC]
+			) {
+				action
+				datetime
+				host: clientRequestHTTPHost
+			}
+		}
+	}
+}
+```
+````