Investigate adding markup/markdown styling to VADS for code snippets

[msbtterswrth]

Background

As we updated our VADS page with code examples, we noticed that there wasn't much visually distinguishing it from regular text.

After discussing this with the design system folks we have the go ahead to investigate adding some kind of codeblock styling similar to something like this.

There may be a way to add markdown or syntax styling into the jekyll templates or we may need to roll our own, let's investigate.

ACs

• Codeblocks can be styled in VADS pages

[adamwhitlock1]

Configuring syntax highlighting within markdown and Jekyll looks to be relatively painless by using Coderay

Coderay would be the most universal way to go about it because then any markdown that uses code blocks would be styled 'automatically'. Alternatively there is also a way to use Rouge but that requires code blocks to be surrounded by a specific liquid tag:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

We will also need to figure out the best styling / theme to use for our code block sections.

[msbtterswrth]

Sounds excellent, any suggestions on themes? Is there a place I could see examples? ( i didn't see any in the first docs for kramdown, but i could've missed them)

[adamwhitlock1]

department-of-veterans-affairs/vets-design-system-documentation#3507

PR is in review when it merges I'll let yall know. Preview the work here: https://dev-design.va.gov/3507/patterns/help-users-to/know-when-their-information-is-prefilled

[msbtterswrth]

This is amazing!! Excellent work!