Merge pull request tailwindlabs#187 from hacknug/next

Improve code blocks

Author: adamwathan

source/_assets/js/components/ResponsiveCodeSample.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+
     <div class="flex items-end justify-center mb-2 bg-white">
       <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-gray-800' : 'text-gray-500'" @click="activeScreen = 'none'" >
         <svg :width="0.857142857142857 * 10" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
@@ -22,10 +23,13 @@
         <p class="text-xs">xl</p>
       </span>
     </div>
+
     <div class="overflow-hidden mb-8">
-      <div class="rounded-t-lg p-4 bg-gray-800 border-b border-gray-300">
-        <div class="scrollbar-none whitespace-pre font-mono text-gray-500 text-sm overflow-x-auto" v-html="highlightedCode"></div>
+
+      <div class="rounded-t-lg bg-gray-800 border-b border-gray-300 whitespace-pre font-mono text-gray-500 text-sm">
+        <pre class="scrollbar-none m-0 p-0 overflow-auto scrolling-touch"><code class="inline-block p-4" v-html="highlightedCode" /></pre>
       </div>
+
       <div class="rounded-b-lg border-l border-r border-b border-gray-400 bg-white p-4" :class="slotClass">
         <slot v-if="activeScreen === 'none'" name="none"></slot>
         <slot v-if="activeScreen === 'sm'" name="sm"></slot>
@@ -34,6 +38,7 @@
         <slot v-if="activeScreen === 'xl'" name="xl"></slot>
       </div>
     </div>
+
   </div>
 </template>
 

source/_assets/less/markdown.less

@@ -196,10 +196,12 @@
   }
 
   > pre, pre&, > ul li pre, > ol li pre {
+    @apply flex p-0 bg-gray-800;
+    @apply text-sm leading-normal;
+  }
+
+  > pre code, pre code&, > ul li pre code, > ol li pre code {
     @apply p-4;
-    @apply bg-gray-800;
-    @apply text-sm;
-    @apply leading-normal;
   }
 
   > table {

source/_assets/less/prism-atom-dark.less

@@ -172,6 +172,7 @@ pre[class*="language-"] {
 code[class*="language-"], pre[class*="language-"] {
   @apply subpixel-antialiased !important;
   @apply text-code-white !important;
+  @apply scrolling-touch !important;
 }
 .token.comment {
   @apply text-gray-500 !important;

source/_partials/code-sample.blade.php

@@ -2,7 +2,7 @@
   <div v-pre class="bg-white rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400 p-4 {{ $class ?? '' }}">
     {{ $slot }}
   </div>
-  <div v-pre class="scollbar-none rounded-b-lg p-4 bg-gray-800">
-    <pre class="scrollbar-none language-{{ $lang ?? 'html' }}" style="margin: 0; padding: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
+  <div v-pre class="rounded-b-lg bg-gray-800">
+    <pre class="scrollbar-none m-0 p-0 language-{{ $lang ?? 'html' }}"><code class="inline-block p-4 scrolling-touch">{{ e($code ?? $slot) }}</code></pre>
   </div>
 </div>

source/docs/installation.blade.md

@@ -8,7 +8,7 @@ titleBorder: true
 <div class="heading mt-0">
   <h2 class="flex markdown mt-0">
     <span class="text-lg bg-gray-200 text-gray-700 h-6 w-6 rounded-full inline-flex justify-center items-center mt-px mr-3">1</span>
-    Install Tailwind via npm 
+    Install Tailwind via npm
   </h2>
 </div>
 
@@ -259,19 +259,19 @@ Before using the CDN build please note, many of the features that make Tailwind
 
 <ul class="list-none pl-0">
   <li class="flex items-center">
-    <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
+    <svg class="h-6 w-6 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
     <span>You can't customize Tailwind's default theme</span>
   </li>
   <li class="flex items-center">
-    <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
+    <svg class="h-6 w-6 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
     <span>You can't use any <a href="/docs/functions-and-directives">directives</a> like <code>@apply</code>, <code>@variants</code>, etc.</span>
   </li>
   <li class="flex items-center">
-    <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
+    <svg class="h-6 w-6 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
     <span>You can't enable features like <a href="/docs/pseudo-class-variants#group-hover"><code>group-hover</code></a></span>
   </li>
   <li class="flex items-center">
-    <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
+    <svg class="h-6 w-6 mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-close-circle"><circle cx="12" cy="12" r="10" fill="#fed7d7"/><path fill="#f56565" d="M13.41 12l2.83 2.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 1 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12z"/></svg>
     <span>You can't install third-party plugins</span>
   </li>
 </ul>