strikethrough code in markdown on github

42.8k views Asked by At

I am talking about github markdown here, for files like README.md.

Question: Is it possible to strikethrough a complete code block in markdown on github?

I know how to mark text as a block of code

this is
multiline code

and this

this

also

by indenting by 4 spaces or by using ``` or `...

I also know how to strike through texts using

  • del tag
  • s tag
  • ~~

Temporary solution:

Independently they work fine, but together not as expected or desired. I tried several combinations of the above mentioned.

For now, I use this:

striked

through

by using ~~ and ` for every single line.

Requirement:

I would like to have a code formatted text striked through, where the code block is continuous:

unfortunately, this is
not striked through

or at least with only a small paragraph in between:

unfortunately, also not striked through

Is this possible at all?

I found some old posts and hints on using jekyll, but what I was searching for is a simple way, preferably in markdown.

4

There are 4 answers

3
Bernardo Dal Corno On BEST ANSWER

After much much trying, I finally got it to work! It boils down to this:

  • inside ``` block, nothing is rendered (other than syntax highlights for language specified)
  • inside <code> block, markdown won't render, only HTML. You can use <strike>. It's fine, but you don't get the syntax coloring
  • now for the magic: use HTML for striking, and markdown for coloring:
<strike>

```language
  this is
  multiline code
```

</strike>

P.S. ``` blocks should always be surrounded by blank lines to work

3
Waylan On

This would only be possible with raw HTML, which GitHub doesn't allow. But you may be able to use a diff instead.

Code blocks are for "pre-formatted" text only. The only formatting you can get in a code block is the formatting that can be represented in plain text (indentation, capitalization, etc). There is no mechanism to mark up the content of a code block (as bold, italic, stricken, underlined, etc). This was an intentional design decision. Otherwise, how would you be able to show Markdown text in a code block? If you want formatted text, then you need to use something other than a code block.

As the rules state:

HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

Therefore you would need to format your own custom HTML code block with the various bits marked up properly:

<pre><code><del>some stricken code</del>
<del>A second line of stricken code</del>
</code></pre>

However, for security reasons, GitHub will strip out any such raw HTML in your Markdown. So while this works where you have full control of the entire stack, on a hosted service it is most likely not possible.

However, I'm assuming you want to show some changes made to a block of code. As it turns out, a specific format already exists for that, namely, a diff. Just use a fenced code block with diff as the language and GitHub will format it correctly:

```diff
  Unchanged Line
- Removed Line
+ Added Line
```

You can see how GitHub displays the above code block live (you can also see that in raw), but I've included a screenshot below for convenience.

enter image description here

I realize that the formatting does not use strike-through, but it does use a commonly used and understood format. For more complex blocks, you should probably use the diff utility program to generate the diff for you.

1
Devon Ostendorf On

On the subject of marking up the content of a code block, to tack an italicized string on to the end of a line of "code", try something like:

<code>id\_pn\_aside\_subscriber\_form\__form\_id_</code>

(You can see this in action at: https://github.com/devonostendorf/post-notif#how-do-you-use-the-stylesheet_filename-attribute-with-the-shortcode)

I had a hard time finding an example that matched this precise use case, so I hope this proves useful for anyone else trying to accomplish a similar effect.

0
Jason Deppen On

Expanding on Waylan's answer:

This may be obvious to others, but it caught me. When you have indented lines, be sure + or - is the first character on the line or it won't highlight.

```diff
<div>
  Unchanged Line
  <ul>
    - <li>This won't work</li>
-    <li>This will</li>
+    <li>1st character, then indent</li>
  </ul>
</div>
```