diff --git a/docs/assets/lu5-hljs-theme.css b/docs/assets/lu5-hljs-theme.css
index 09f42a07..f48ac7c2 100644
--- a/docs/assets/lu5-hljs-theme.css
+++ b/docs/assets/lu5-hljs-theme.css
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');pre code.hljs{display:block;overflow-x:auto;padding:1em;font-family:"Source Code Pro",monospace;font-optical-sizing:auto;font-weight:400;font-style:normal;border-radius:8px}code.hljs{padding:3px 5px}.hljs{background:#dfd4ff;color:#123422}.hljs-comment,.hljs-quote{color:#8575bf}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#AA36EF}.hljs-number,.hljs-built_in,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#461164}.hljs-attribute{color:#551b93}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#551b93}.hljs-title,.hljs-section{color:#9916cF}.hljs-keyword,.hljs-selector-tag{color:#551b93}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-string,.hljs-symbol,.hljs-type,.hljs-quote{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:bold}}
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');pre code.hljs{display:block;overflow-x:auto;padding:1em;font-family:"Source Code Pro",monospace;font-optical-sizing:auto;font-weight:400;font-style:normal;border-radius:8px;max-width:38em;width:fit-content;padding-right:6em}code.hljs{padding:3px 5px}.hljs{background:#dfd4ff;color:#123422}.hljs-comment,.hljs-quote{color:#8575bf}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#AA36EF}.hljs-number,.hljs-built_in,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#461164}.hljs-attribute{color:#551b93}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#551b93}.hljs-title,.hljs-section{color:#9916cF}.hljs-keyword,.hljs-selector-tag{color:#551b93}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-string,.hljs-symbol,.hljs-type,.hljs-quote{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:bold}}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 6d882e3d..bd71fb16 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,7 +31,7 @@ <h1 class="module">Reference</h1>
 				<span class="version">v0.0.2</span>
 			</header>
 
-			<div class="modules" id="reactive"><div class="summary"><h3>shapes</h3><ul><li class="index"><a class="dark index" href="./shapes.html#circle">circle</a></li><li class="index"><a class="dark index" href="./shapes.html#rect">rect</a></li><li class="index"><a class="dark index" href="./shapes.html#square">square</a></li><li class="index"><a class="dark index" href="./shapes.html#line">line</a></li><li class="index"><a class="dark index" href="./shapes.html#quad">quad</a></li><li class="index"><a class="dark index" href="./shapes.html#text">text</a></li><li class="index"><a class="dark index" href="./shapes.html#point">point</a></li><li class="index"><a class="dark index" href="./shapes.html#arc">arc</a></li><li class="index"><a class="dark index" href="./shapes.html#ellipse">ellipse</a></li><li class="index"><a class="dark index" href="./shapes.html#triangle">triangle</a></li></ul></div><div class="summary"><h3>lu5_math</h3><ul><li class="index"><a class="dark index" href="./lu5_math.html#round">round</a></li></ul></div><div class="summary"><h3>io</h3><ul><li class="index"><a class="dark index" href="./io.html#print">print</a></li></ul></div><div class="summary"><h3>window</h3><ul><li class="index"><a class="dark index" href="./window.html#createWindow">createWindow</a></li><li class="index"><a class="dark index" href="./window.html#background">background</a></li></ul></div><div class="summary"><h3>loaders</h3><ul><li class="index"><a class="dark index" href="./loaders.html#loadFont">loadFont</a></li></ul></div><div class="summary"><h3>events</h3><ul><li class="index"><a class="dark index" href="./events.html#isKeyDown">isKeyDown</a></li></ul></div><div class="summary"><h3>setting</h3><ul><li class="index"><a class="dark index" href="./setting.html#fill">fill</a></li><li class="index"><a class="dark index" href="./setting.html#strokeWeight">strokeWeight</a></li><li class="index"><a class="dark index" href="./setting.html#noFill">noFill</a></li><li class="index"><a class="dark index" href="./setting.html#stroke">stroke</a></li><li class="index"><a class="dark index" href="./setting.html#noStroke">noStroke</a></li><li class="index"><a class="dark index" href="./setting.html#textSize">textSize</a></li></ul></div></div>
+			<div class="modules" id="reactive"><div class="summary"><h3>shapes</h3><ul><li class="index"><a class="dark index" href="./shapes.html#circle">circle</a></li><li class="index"><a class="dark index" href="./shapes.html#rect">rect</a></li><li class="index"><a class="dark index" href="./shapes.html#square">square</a></li><li class="index"><a class="dark index" href="./shapes.html#line">line</a></li><li class="index"><a class="dark index" href="./shapes.html#quad">quad</a></li><li class="index"><a class="dark index" href="./shapes.html#text">text</a></li><li class="index"><a class="dark index" href="./shapes.html#point">point</a></li><li class="index"><a class="dark index" href="./shapes.html#arc">arc</a></li><li class="index"><a class="dark index" href="./shapes.html#ellipse">ellipse</a></li><li class="index"><a class="dark index" href="./shapes.html#triangle">triangle</a></li></ul></div><div class="summary"><h3>io</h3><ul><li class="index"><a class="dark index" href="./io.html#print">print</a></li></ul></div><div class="summary"><h3>setting</h3><ul><li class="index"><a class="dark index" href="./setting.html#fill">fill</a></li><li class="index"><a class="dark index" href="./setting.html#strokeWeight">strokeWeight</a></li><li class="index"><a class="dark index" href="./setting.html#noFill">noFill</a></li><li class="index"><a class="dark index" href="./setting.html#stroke">stroke</a></li><li class="index"><a class="dark index" href="./setting.html#noStroke">noStroke</a></li><li class="index"><a class="dark index" href="./setting.html#textSize">textSize</a></li></ul></div><div class="summary"><h3>window</h3><ul><li class="index"><a class="dark index" href="./window.html#createWindow">createWindow</a></li><li class="index"><a class="dark index" href="./window.html#background">background</a></li></ul></div><div class="summary"><h3>lu5_math</h3><ul><li class="index"><a class="dark index" href="./lu5_math.html#round">round</a></li></ul></div><div class="summary"><h3>loaders</h3><ul><li class="index"><a class="dark index" href="./loaders.html#loadFont">loadFont</a></li></ul></div><div class="summary"><h3>events</h3><ul><li class="index"><a class="dark index" href="./events.html#isKeyDown">isKeyDown</a></li></ul></div></div>
 		</main>
   </body>
 </html>
diff --git a/tasks/templates/css/lu5-hljs-theme.css b/tasks/templates/css/lu5-hljs-theme.css
index 056e9f34..af3c3a9a 100644
--- a/tasks/templates/css/lu5-hljs-theme.css
+++ b/tasks/templates/css/lu5-hljs-theme.css
@@ -10,6 +10,9 @@ pre code.hljs {
   font-weight: 400;
   font-style: normal;
   border-radius: 8px;
+  max-width: 38em;
+  width: fit-content;
+  padding-right: 6em;
 }
 code.hljs {
   padding: 3px 5px