feat: style button by default #14

Closes #14

Author: metonym

src/createConfig.ts

@@ -76,6 +76,33 @@ const custom_css = `
   @media (max-width: 767px) {
     main { padding: 15px; }
   }
+
+  /**
+    * GitHub Primer button CSS
+    * https://primer.style/css/components/buttons
+    **/
+  .code-fence button {
+    font-family: inherit;
+    text-transform: none;
+    position: relative;
+    display: inline-block;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 6px;
+    appearance: none;
+    color: #24292e;
+    background-color: #fafbfc;
+    border-color: rgba(27,31,35,0.15);
+    box-shadow: 0 1px 0 rgba(27,31,35,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
+    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  }
 `;
 
 interface CreateConfigOptions {

src/preprocessReadme.ts

@@ -170,8 +170,8 @@ export function preprocessReadme(opts: Partial<PreprocessReadmeOptions>): Pick<P
 
       return {
         code: `<script>${script_content}</script>
-              <style>${style_content}</style>
-              <main class="markdown-body">${result}</main>`,
+               <style>${style_content}</style>
+               <main class="markdown-body">${result}</main>`,
       };
     },
   };

test/README.md

@@ -33,6 +33,8 @@ Check out my cool component library.
   Increment the count
 </Button>
 
+<button type="button">Button</button>
+
 <h1>{count}</h1>
 
 {#each items as item}