Merge pull request #3507 from department-of-veterans-affairs/authed-patterns/aw/185/add-syntax-highlighting-for-markdown-code-blocks

Add syntax highlighting for markdown code blocks

Author: adamwhitlock1

_config.yml

@@ -9,7 +9,7 @@ example_library_name: "VADS Example Library"
 resource_library_name: "VADS Templates, Patterns, and Forms"
 
 # Common links
-figma_example_library: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Examples?type=design&node-id=0%3A1&mode=design&t=c29j3xBxzMAyLWxu-1 
+figma_example_library: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Examples?type=design&node-id=0%3A1&mode=design&t=c29j3xBxzMAyLWxu-1
 figma_component_library: https://www.figma.com/file/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?type=design&node-id=121%3A1484&mode=design&t=ygQCLqlAL5VdSPil-1
 figma_templates_library: https://www.figma.com/file/4A3O3mVx4xDAKfHE7fPF1U/VADS-Templates%2C-Patterns%2C-and-Forms?type=design&node-id=2988%3A29744&mode=design&t=A89mK0w9KGp2uWIR-1
 figma_annotations_library: https://www.figma.com/file/CZcnWfQOwtLqPm4WA5paYG/VADS-Web-Annotation-Kit?type=design&node-id=415%3A1135&mode=design&t=V0V5YZrcbM7VnWa6-1
@@ -34,16 +34,16 @@ new_pattern_template_raw_link: https://raw.githubusercontent.com/department-of-v
 update_documentation_link: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/new?assignees=&labels=vsp-design-system-team&template=2_documentation_request_form.yml
 uswds_link: https://designsystem.digital.gov/
 
-
 # People
-sketch_for_teams_admin: "Kevin Hoffman" 
+sketch_for_teams_admin: "Kevin Hoffman"
 sketch_library_owner: "Lillian Boot, Barb Denney"
 experimental_reviewer_1: "Matthew Dingee"
 
-
 # Build settings
 markdown: kramdown
-highlighter: none
+highlighter: rouge
+kramdown:
+  syntax_highlighter: rouge
 plugins:
   - jekyll-last-modified-at
   - jekyll-redirect-from
@@ -91,7 +91,7 @@ exclude:
   - _foundation/layout/html
   - _foundation/utilities/html
 
-# Default for building locally. 
+# Default for building locally.
 # See configuration files in jekyll-configs/ for environment overrides.
 storybook_path: "http://127.0.0.1:6006"
 storybook_prod_uswds_path: "https://design.va.gov/storybook/?path=/docs/uswds"

src/_about/developers/using-web-components.md

@@ -148,7 +148,7 @@ If the Web Component has a custom event that you need to use and you're **not**
   const element = document.querySelector('va-example-component');
   const exampleCallback = event => { console.log(event.detail) }
   element.addEventListener('vaChange', exampleCallback)
-<script>
+</script>
 
 <va-example-component>
 ```

src/_about/naming.md

@@ -22,8 +22,8 @@ It consists of three required parts.
 
 When put together, the structure is `[global namespace]-[class prefix]-[BEM syntax]`, or:
 
-```
-vads-c-component-name
+```css
+.vads-c-component-name
 ```
 
 There are other variants on the naming convention as well.
@@ -53,26 +53,26 @@ While the BEM syntax typically results in longer class names, it is excellent fo
 
 For example, an alert can be considered a **block** (for brevity, we will not use the full naming convention here).
 
-```
+```css
 .alert {}
 ```
 
 The alert might have several child **elements** unique to that block, perhaps a header or a body. Element names are the block + the element name, separated by two underscores (`__`).
 
-```
+```css
 .alert__header {}
 .alert__body {}
 ```
 
 There can be different types of alerts, such as success or error. These are _types_ are known as **modifiers**. Modifier names are the block + modifier name, separated by two hyphens (`--`). Modifier selectors are secondary class names that contain only the modified properties.
 
-```
+```css
 .alert--success {}
 .alert--error {}
 ```
 
 When put together, we can have something like:
-```
+```html
 <div class="alert alert--success">
   <h2 class="alert__header">This is the alert heading</h2>
   <div class="alert__body">

src/assets/javascripts/components/code-snippets.js

@@ -5,12 +5,56 @@ if (showSnippetButton.length) {
 }
 
 for (var i = 0; i < showSnippetButton.length; i++) {
-  showSnippetButton[i].addEventListener("click", function(e) {
+  showSnippetButton[i].addEventListener("click", function (e) {
     if (this.innerHTML == original_text) {
       this.innerHTML = '<span class="fas fa-minus vads-u-margin-right--0p5"></span> Hide HTML';
     }
     else {
       this.innerHTML = original_text;
     }
   });
-}
+}
+
+// allow markdown code blocks ``` to be copied to clipboard via va-button
+document.addEventListener('DOMContentLoaded', function () {
+  const codeBlocks = document.querySelectorAll('pre.highlight');
+
+  codeBlocks.forEach(function (codeBlock) {
+    // Create container for proper button positioning
+    const container = document.createElement('div');
+    container.className = 'highlight-container';
+
+    // Create wrapper div copy button
+    const copyButtonWrapper = document.createElement('div');
+
+    // Create VA button
+    const copyButton = document.createElement('va-button');
+    copyButton.setAttribute('secondary', '');
+    copyButton.setAttribute('text', 'Copy');
+    copyButton.className = 'copy-button';
+
+    copyButtonWrapper.appendChild(copyButton);
+
+    // Wrap code block
+    codeBlock.parentNode.insertBefore(container, codeBlock);
+    container.appendChild(codeBlock);
+    container.appendChild(copyButtonWrapper);
+
+    // Add click handler
+    copyButton.addEventListener('click', async function () {
+      try {
+        const code = codeBlock.textContent;
+        await navigator.clipboard.writeText(code);
+
+        // Show success state
+        copyButton.setAttribute('text', 'Copied!');
+        setTimeout(() => {
+          copyButton.setAttribute('text', 'Copy');
+        }, 2000);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+        copyButton.setAttribute('text', 'Error');
+      }
+    });
+  });
+});

src/assets/stylesheets/_components/_code-snippets.scss

@@ -30,6 +30,10 @@
   border-top-color: $color-gray-lightest !important;
 }
 
+.site-code-snippet__content .highlight-container {
+  border: 0px !important;
+}
+
 .site-code-snippet__content[aria-hidden="true"] {
   display: block !important;
   max-height: 96px;