diff --git a/docs/docs/security-in-gatsby.md b/docs/docs/security-in-gatsby.md
index 2a82f6c793b45..5f46a25fb65f6 100644
--- a/docs/docs/security-in-gatsby.md
+++ b/docs/docs/security-in-gatsby.md
@@ -10,7 +10,7 @@ Cross-Site Scripting is a type of attack that injects a script or an unexpected
JSX elements automatically escape HTML tags by design. See the following example:
-```js
+```jsx
// highlight-next-line
const username = ``
@@ -23,7 +23,7 @@ On the other hand, fields in your application may need to render inner HTML tags
In order to render those HTML tags you need to use an HTML parser (e.g. [html-react-parser](https://github.com/remarkablemark/html-react-parser)) or the `dangerouslySetInnerHTML` prop, like so:
-```js
+```jsx
const CommentRenderer = comment => (
// highlight-next-line
@@ -51,15 +51,20 @@ For example, assume that the comments in your blog are sent in a form similar to
A malicious website could inspect your site and copy this snippet to theirs. If the user is logged in, the associated cookies are sent with the form and the server cannot distinguish the origin of it. Even worse, the form could be sent when the page loads with information you don't control:
-```js
+```html
// highlight-next-line
-
-
+
+
+
```
### How can you prevent cross-site request forgery?
@@ -76,7 +81,7 @@ Actions that do not simply read data should be handled in a POST request. In the
If you want to protect a page your server will provide an encrypted, hard to guess **token**. That token is tied to a user's session and must be included in every POST request. See the following example:
-```js
+```html