[Style guide] Added secton on graphql api explorer

Author: kodster28

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,7 +80,7 @@ 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/)
@@ -93,7 +93,7 @@ export default {
 };
 ```
 
-````mdx
+````mdx "playground"
 ```js playground
 export default {
 	fetch() {
@@ -102,3 +102,46 @@ 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).
+
+```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
+			}
+		}
+	}
+}
+```
+
+````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
+			}
+		}
+	}
+}
+```
+````