Docs: replace textareas with scrolling divs in code-block component

[warriordog]

The documentation site uses textareas to handle the code blocks, but this causes issues for accessibility tech and other browser tools that assume that the textarea is a field for user input. This should be replaced with a div for better compatibility and correct semantics. Some things to be aware of:

• Existing textareas are sized in "rows" currently. A div-based implementation will need to be sized some other way.
• These are whitespace-sensitive, so that needs to be handled in CSS or in the Mooltipage compiler. CSS is better if possible.

The code-block component is implemented in codeBlock.html.

[aaronleopold]

Hey there, I can try and take a look at this if you'd like 🙂

[warriordog]

Hello @aaronleopold, thanks for the help!
I'll go ahead and assign you this issue to you, but you're in no way obligated to complete it. Let me know if you ever change your mind.

I don't know if you've looked much at the code for the documentation website, but the example code blocks are implemented with two components: docs/src/fragments/exampleCode.html and docs/src/fragments/codeBlock.html. Most of the changes for this work will be in the code-block component, but code-block is only used directly by example-code so make sure to look there to see how it works. The entire documentation project is written using Mooltipage fragments and scripts, which aren't fully documented yet. The HTML Usage section might be helpful.

If you need help understanding anything then feel free to tag me in a comment or contact me directly at acomputerdog@gmail.com.

[aaronleopold]

@warriordog Thanks for the clarification! I'll have time later this week to really dive in, and I'll be sure to reach out if I have any questions! 😄