CODEWITHSUNDEEP
htmlmarkdowndropdownsyntax-highlightingcode-snippets
Zeek Joseph
Zeek Joseph

Reputation: 71

Syntax highlighted code in Markdown dropdown

I'm writing a README file for my GitHub repository using Markdown. At one point in the README file, I have C# code that the user may copy-paste. This code is long—54 lines, to be exact—and I don't want it to pollute the rest of the README (which is very long). The solution to this is to create a dropdown, which can be accomplish using HTML due to Markdown's support for inline HTML (in most implementations, including GitHub's):

<details>
<summary>Code</summary>
<br>
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
</details>

This works, but it's ugly. It's just plain text, not code. We can do better by placing it in a <code> tag, which makes the text look like this:

<details>
<summary>Code</summary>
<br>
<code>
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
<code>
</details>

However, this still doesn't have syntax highlighting. In markdown, you can use ```` to achieve syntax highlighted code, like this:

using System;
using System.Collections;

public class MyClass
{
    // Class body here
}

However, HTML doesn't have any equivalent for this.

I've tried to embed Markdown into the HTML content that's embedded in the Markdown content using , like this:

<!-- File: code_snippet.md -->

```c#
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}

<!-- File: README.md -->

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<details>
<summary>Code</summary>
<br>
<zero-md src="code_snippet.md"></zero-md>
</details>

However, this does not work since Markdown (for obvious reasons) does not allow client-side scripts to execute. To my knowledge, the <script> tag is completed ignored.

I haven't been able to think of anything else. I'm stumped. Is it possible to achieve syntax highlighting in HTML, or do I just have to settle for <code>? Or maybe I'm thinking wrong, and there's some way to solve on the Markdown side?

It would be even better if a solution allowed me to divide the code snippet and README.md into separate files, and then include the code snippet in the dropdown rather than having to paste the raw thing in there and pollute the code of the README. But this is just a bonus.

Upvotes: 1

Views: 866

Answers (1)

Crystal Kanana
Crystal Kanana

Reputation: 1

It is true that Markdown ignores the script tag.But what if you use triple backtick(''') syntax provided by git hub to define a code block with a specific language which in this case is C#

Upvotes: 0

Related Questions