Nuxt V3 Content Markdown Code Background, Border and Overflow Scroll CSS

Jan 6, 2023
Overwrite content ProseCode.vue

Create components/content/ProseCode.vue

<template>  <div class="prose-code">    <slot />  </div></template><style>.prose-code {  font-size: 1rem;  background-color: #f4f4f5;  border: 1px solid #d4d4d8;  border-radius: .5rem;  margin: 32px 0;  overflow-x: auto;}.prose-code pre {  margin: 0;  line-height: 1.4;  padding: 16px;}pre code .line {  display: block;  min-height: 1rem;}</style>

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.