app/components/pages/solutions/SolutionDetail.vue

@@ -11,7 +11,11 @@
       <p class="solution-summary">{{ solution.summary }}</p>
     </header>
     <section class="solution-content">
-      <markdown-renderer :content="solution?.content || ''" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-if="!hydrated" v-html="solution?.content || ''" />
+      <div v-else>
+        <HtmlRenderer class="html-typography" :html="solution.content || ''" />
+      </div>
     </section>
   </article>
 </template>
@@ -23,6 +27,12 @@
       default: null,
     },
   });
+
+  const hydrated = ref(false);
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>

app/components/shared/QuestionList.vue

@@ -8,7 +8,7 @@
         :title="question.title"
         :name="question.id"
       >
-        <!-- <markdown-renderer :content="question.content || ''" /> -->
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <div v-if="!hydrated" v-html="question.content" />
         <div v-else>
           <HtmlRenderer