Add markdown syntax highlighting to GitHub comments/new issues/etc #4358

Currently when writing comments, new issues, etc on GitHub; there is no syntax highlighting in the various text areas. For short/simple comments/etc this is ok, but for much longer/more detailed comments (as I tend to write), and particularly when there are a lot of inline links, etc; the plain black/white text can end up all merging together and causing my eyes to glaze over.

It would be awesome if we could add some kind of markdown syntax highlighting to these areas (bonus points if it leverages existing styling/etc that already exists on GitHub to achieve it).

I haven't spent any time digging into the technicals of how this could be achieved in the simplest/most lightweight way yet.

While there is already the ability to set markdown as the code style in triple backtick code blocks, it's syntax highlighting seems rather minimal; so i'm not sure if leveraging the same styles would make any sense here (though it would be better than none at all)

eg.

## Markdown Syntax Highlighting!

It would be really great if there was markdown syntax highlighting here, as when there is a lot of text, it gets really hard to read and my eyes kind of glaze over.

[this is totally a valid link to something really long](https://github.com/sparkletown/sparkle/issues/778#often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths) and often [i might want to link to a couple](https://github.com/sparkletown/sparkle/issues/778#often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths) of different urls [in the same sentence](https://github.com/sparkletown/sparkle/issues/778#often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths) which just becomes [totally unreadable](https://github.com/sparkletown/sparkle/issues/778#often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths-often-with-really-long-url-paths)

From a quick google search, a few different potential libs/etc came up:

• https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

  • The solution: I added both a syntax-highlighted <pre><code> and a textarea to the page, and made the innerText content of <pre><code> change oninput, using a JavaScript function. I also added an aria-hidden attribute to the <pre><code> result so that screen readers would only read what is entered into the <textarea> instead of being read aloud twice.

  • We can add some CSS that basically allows the <textarea> and the <pre><code> elements to be sized and spaced consistently.

  • Then we want to position them right on top of each other

• https://github.com/kueblc/LDT

  • Lightweight Decorator for Textareas

  • LDT aims to provide a simple, lightweight, and highly extensible alternative to existing in-browser live syntax highlighting solutions by leveraging clever CSS and native functionality.

  • It behaves (mostly) like a textarea because it is a (transparent) textarea! The decorator maintains a styled copy of the content in a display layer which is aligned underneath the real textarea. By using a real textarea, we get all the native functionality for free!

• https://ourcodeworld.com/articles/read/140/top-5-best-code-syntax-highlighter-javascript-plugins
  • http://prismjs.com/
  • https://highlightjs.org/
  • https://craig.is/making/rainbows
    • This one is interesting in that it's only 1.4kb
  • http://alexgorbatchev.com/SyntaxHighlighter/
  • http://shjs.sourceforge.net/

While these are 'real' urls, as required above, they probably aren't any more useful than the screenshots/etc provided:

• Creating new issues (eg. https://github.com/sparkletown/sparkle/issues/new)
  • 
• New comments on existing issues (eg. https://github.com/sparkletown/sparkle/issues/778)
  • in the 'leave a comment' box
  • 
• Probably some other places too.

I searched through the backlog issues and don't think this has been raised before, and I believe it would make sense as an addition to refined-github. While i'm pretty busy at the moment, and not deeply aware of the process for code contributions yet (haven't read the docs on it), this is a feature I would potentially be able to implement/help implement if it's likely to be desired/accepted/etc and someone can point me in the right direction.