diff --git a/source/_posts/2015-07-21-automating-sculpin-jenkins.md b/source/_posts/2015-07-21-automating-sculpin-jenkins.md
index c93b07ce..317baa58 100644
--- a/source/_posts/2015-07-21-automating-sculpin-jenkins.md
+++ b/source/_posts/2015-07-21-automating-sculpin-jenkins.md
@@ -69,7 +69,7 @@ talks:
 The Twig layout:
 
 ```language-twig
-{% raw -%}
+{% verbatim -%}
 {% for talk in talks|reverse if talk.date >= now %}
     {# Upcoming talks #}
 {% endfor %}
@@ -77,7 +77,7 @@ The Twig layout:
 {% for talk in talks if talk.date < now %}
     {# Previous talks #}
 {% endfor%}
-{%- endraw %}
+{%- endverbatim %}
 ```
 
 I also didn’t want to have to push an empty commit or manually trigger a job in Jenkins after doing a talk in order for it to be positioned in the correct place on the page, so I also wanted Jenkins to schedule a regular build regardless of whether or not code had been pushed, so ensure that my talks page would be up to date.
diff --git a/source/_posts/2016-07-15-building-gmail-filters-in-php.md b/source/_posts/2016-07-15-building-gmail-filters-in-php.md
index e1f1a7d6..9ffeee84 100644
--- a/source/_posts/2016-07-15-building-gmail-filters-in-php.md
+++ b/source/_posts/2016-07-15-building-gmail-filters-in-php.md
@@ -50,7 +50,7 @@ Before:
 
 <div v-pre markdown="1">
 ```language-twig
-{% raw %}{{ filter.isArchive ? 'true' : 'false' }}{% endraw %}
+{% verbatim %}{{ filter.isArchive ? 'true' : 'false' }}{% endverbatim %}
 ```
 </div>
 
@@ -58,7 +58,7 @@ After:
 
 <div v-pre markdown="1">
 ```language-twig
-{% raw %}{{ filter.isArchive|boolean_string }}{% endraw %}
+{% verbatim %}{{ filter.isArchive|boolean_string }}{% endverbatim %}
 ```
 </div>
 
diff --git a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
index 0bba874f..c84a01b7 100644
--- a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
+++ b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
@@ -61,7 +61,7 @@ export default {
 
 `src/components/Welcome.vue`:
 
-<div v-pre markdown="1">{% raw %}
+<div v-pre markdown="1">{% verbatim %}
 ```vuejs
 <template>
   <div>
@@ -163,7 +163,7 @@ export default {
 }
 </script>
 ```
-{% endraw %}</div>
+{% endverbatim %}</div>
 
 ## Making it responsive
 
@@ -191,7 +191,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
 
 `src/components/MainMenu.vue`:
 
-{% raw %}<div v-pre markdown="1">
+{% verbatim %}<div v-pre markdown="1">
 ```vuejs
 <template>
   <div>
@@ -275,7 +275,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
   }
 </script>
 ```
-</div>{% endraw %}
+</div>{% endverbatim %}
 
 ## The result
 
diff --git a/source/_posts/2018-12-16-published-my-first-npm-package.md b/source/_posts/2018-12-16-published-my-first-npm-package.md
index ace4cc99..8f17fdff 100644
--- a/source/_posts/2018-12-16-published-my-first-npm-package.md
+++ b/source/_posts/2018-12-16-published-my-first-npm-package.md
@@ -54,7 +54,7 @@ The `v-cloak` directive exists on an element until Vue finishes compiling, after
 
 In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div within the `body`.
 
-{% raw %}<div v-pre markdown="1">
+{% verbatim %}<div v-pre markdown="1">
 ```twig
 <body class="font-sans leading-normal">
     <div id="app" v-cloak>
@@ -62,11 +62,11 @@ In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div withi
     </div>
 </body>
 ```
-</div>{% endraw %}
+</div>{% endverbatim %}
 
 Within my `navbar.html.twig` partial, I have a placeholder div that also contains the site name, which is instantly visible but has the `v-cloak-block` class so it’s hidden once Vue has compiled and the `Navbar` Vue component is visible instead.
 
-{% raw %}<div v-pre markdown="1">
+{% verbatim %}<div v-pre markdown="1">
 ```twig
 <div class="border-bottom border-b border-gray-300 mb-6">
     <div class="container mx-auto">
@@ -81,7 +81,7 @@ Within my `navbar.html.twig` partial, I have a placeholder div that also contain
     </div>
 </div>
 ```
-</div>{% endraw %}
+</div>{% endverbatim %}
 
 I was originally surprised that these classes weren’t included as part of Tailwind or as part of an existing plugin, but as I’ve already used these styles on several projects that include Vue.js with Symfony or Sculpin, it made sense to extract it into a plugin and make it available as a npm package which I can easily add to any project - as well as making it easier to maintain if I need to add additional variations at a later point.
 
diff --git a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
index a85e48f5..454b8ca3 100644
--- a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
+++ b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
@@ -52,7 +52,7 @@ In the first version, every link was individually styled which resulted in a lot
 
 I added a `style` section within `Welcome.vue`, and added some default styling for links based on their location on the page - [extracting some Tailwind components](https://tailwindcss.com/docs/extracting-components).
 
-<div v-pre markdown="1">{% raw %}
+<div v-pre markdown="1">{% verbatim %}
 ```vuejs
 <template>
   ...
@@ -104,7 +104,7 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc
     @apply border-none
 </style>
 ```
-{% endraw %}</div>
+{% endverbatim %}</div>
 
 ## Extracting a Vue component for Drupal blocks
 
