updated to improve the css and fixed the jsdelivr link

vanillawc · Feb 21, 2021 · 497124e · 497124e
1 parent a9c804a
commit 497124e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 *Import from CDN*
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected].3/src/wc-code.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected].4/src/wc-code.js"></script>
 ```
 
 ## Usage NOTE

diff --git a/docs/index.html b/docs/index.html
@@ -6,24 +6,20 @@
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-markdown@1/index.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/build/index.js"></script>
- <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
  </head>
  <body>
- <header>
+ <style>
+ article{
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 700px;
+ }
+ </style>
+ <article>
  <h1>wc-code</h1>
  <p>cool ways to show code</p>
- </header>
- <article>
  <wc-markdown>
  <script type="wc-content">
- # Note
- this content was written in [new.css][new-css-link]
- and with the help of [wc-markdown][wc-markdown-link]
-
- [new-css-link]: https://newcss.net/
- [wc-markdown-link]: https://github.com/vanillawc/wc-markdown
-
  # wc-code elements
  `<wc-code>` elements are elements that allow you to present your
  code with a rich feature of options
@@ -44,8 +40,7 @@ <h3>JavaScript usage -</h3>
  var url = "https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,racist,sexist&format=txt"
  var resp = await fetch(url);
  var text = await resp.text();
- console.log(text);
-
+ console.log(text); 
  </script>
  </wc-code>
  <h3>Python usage -</h3>
@@ -54,8 +49,7 @@ <h3>Python usage -</h3>
  <script type="wc-content">
  a = 1
  b = 5
- print(a, b, a+b)
-
+ print(a, b, a+b) 
  </script>
  </wc-code>
  <wc-markdown highlight>
@@ -119,4 +113,4 @@ <h3>Python usage -</h3>
  </wc-code-zone>
  </article>
  </body>
-</html>
+</html>
diff --git a/docs/index.pug b/docs/index.pug
diff --git a/src/wc-code.css b/src/wc-code.css
@@ -1,8 +1,14 @@
+wc-code{
+ padding: 10px;
+ border: 2px solid black;
+ border-radius: 5px;
+}
+
 wc-code input[type="button"] {
- border: 1px solid grey;
- border-radius: 3px;
- margin: 5px 5px;
- padding: 4px 18px;
+ border: 1px solid grey;
+ border-radius: 3px;
+ margin: 5px 5px;
+ padding: 4px 18px;
  background: white;
  color: black;
  cursor: pointer;