#11 add css for nav bar and enable prism highlighter for yml, ruby and bash

Author: navarasu

docs/index.html

@@ -76,6 +76,9 @@
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-bash.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-yaml.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-ruby.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@3/dist/docsify-themeable/main.min.js" type="text/javascript"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@3/dist/docsify-themeable/index.min.js" type="text/javascript">

docs/quickstart.md

@@ -2,7 +2,7 @@
 
 ## Install
 
-```
+```bash
 sls plugin install -n serverless-ruby-layer
 ```
 
@@ -12,7 +12,7 @@ sls plugin install -n serverless-ruby-layer
 
 *`serverless.yml`*
 
-```YML
+```yml
 service: basic
 
 plugins:

docs/theme-custom.css

@@ -3,4 +3,99 @@
      background-image: var(--logoImage);
      background-size: contain;
      height: 60px;
-  }
+  }
+
+  .app-nav {
+  margin: 15px 60px 0 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  z-index: 10
+}
+
+.app-nav.no-badge {
+  margin-right: 25px
+}
+
+.app-nav p {
+  margin: 0
+}
+
+.app-nav>a {
+  margin: 0 1rem;
+  padding: 5px 0
+}
+
+.app-nav li,
+.app-nav ul {
+  display: inline-block;
+  list-style: none;
+  margin: 0
+}
+
+.app-nav a {
+  color: inherit;
+  font-size: 16px;
+  text-decoration: none;
+  transition: color .3s
+}
+
+.app-nav a.active,
+.app-nav a:hover {
+  color: var(--theme-color)
+}
+
+.app-nav a.active {
+  border-bottom: 2px solid var(--theme-color)
+}
+
+.app-nav li {
+  display: inline-block;
+  margin: 0 1rem;
+  padding: 5px 0;
+  position: relative;
+  cursor: pointer
+}
+
+.app-nav li ul {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #ddd #ddd #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: none;
+  max-height: calc(100vh - 61px);
+  overflow-y: auto;
+  padding: 10px 0;
+  position: absolute;
+  right: -15px;
+  text-align: left;
+  top: 100%;
+  white-space: nowrap
+}
+
+.app-nav li ul li {
+  display: block;
+  font-size: 14px;
+  line-height: 1rem;
+  margin: 8px 14px;
+  white-space: nowrap
+}
+
+.app-nav li ul a {
+  display: block;
+  font-size: inherit;
+  margin: 0;
+  padding: 0
+}
+
+.app-nav li ul a.active {
+  border-bottom: 0
+}
+
+.app-nav li:hover ul {
+  display: block
+}
+#docsify-darklight-theme {
+  top:100px;
+  }