Merge pull request #490 from shanmukhateja/feat-copy-to-clipboard

docs: Add copy to clipboard to code snippet

Author: santoshyadavdev

angular.json

@@ -80,12 +80,15 @@
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "node_modules/bulma/css/bulma.css",
               "node_modules/prism-themes/themes/prism-material-light.css",
-              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
+              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
+              "node_modules/prismjs/plugins/toolbar/prism-toolbar.css"
             ],
             "scripts": [
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
+              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
+              "node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js",
+              "node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
             ]
           },
           "configurations": {

projects/bulma-app/src/styles.scss

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 body {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
 .parent-container {
@@ -70,3 +70,19 @@ body {
   display: block;
   font-size: 1.25rem;
 }
+
+/** copy to clipboard button css */
+
+div.code-toolbar > .toolbar {
+  opacity: unset !important;
+  top: 0.5em !important;
+  right: 0.5em !important;
+}
+
+div.code-toolbar > .toolbar button {
+  color: white !important;
+  background-color: black !important;
+  padding: 4px !important;
+  font-size: 15px !important;
+  cursor: pointer !important;
+}