125

How can I make a word in a code sample bold? I only see asterisks around the expected bold text.

sample **sample** sample
2
  • You are not quoting, you are formatting the text as code / preformatted. Jun 8, 2013 at 9:07
  • 1
    Re: your edit, there is no way to use markdown formatting inside code samples. By definition, content in code samples is rendered verbatim. Jun 8, 2013 at 9:20

3 Answers 3

141

Use <pre> formatting and HTML tags.

<pre>
sample <b>sample</b> sample
</pre>

Gives:

sample sample sample

Since you can use other HTML tags as well, this is nice for including inline documentation for commands or classes, etc.:

<pre>
<i><a href="http://manpages.ubuntu.com/manpages/dapper/man1/prename.1.html">rename</a></i> ’s/\.bak$//’ *.bak
</pre>

Gives:

rename 's/\.bak$//' *.bak

But, with any formatting tricks, please don't overdo it.

7
  • I'm noticing that if the underlying code would overfill the page, instead of automatically making a horizontally scrolling box, the <pre> approach just pushes to a second line and ruins the formatting. Is there a way around this? Nov 16, 2015 at 21:06
  • Not that I am aware of. I think that still, if you're copypasting that code, the line breaks would be correct.
    – slhck
    Nov 16, 2015 at 21:55
  • well, the line breaks are respected.. just that there's too many of them Nov 17, 2015 at 1:13
  • 3
    I cannot get this to work on sites that accept code without getting the "improperly formatted code" error. I even get it if use <pre><code> instead.
    – trlkly
    May 2, 2017 at 23:40
  • I assume there is no way of doing this if the code sample actually is html. In that case, is there any other option? May 5, 2020 at 8:47
  • @OttoAbnormalverbraucher Not that I am aware of, no.
    – slhck
    May 5, 2020 at 11:58
  • It's worth checking how your Markdown parser converts normal code to HTML (the easiest way is the right-click "inspect" in your browser). For instance, some parsers use <span class="pre"> instead of <code>, and some parsers add additional CSS classes to <pre>. If you don't match what the parser produces, the formatting of the code may be different than normal backtick code.
    – asmeurer
    May 11 at 23:33
39

Disclaimer: I do not condone this, I'm just pointing out a possibility (for the sake of completion)

Markdown-only hack

The basic idea is to apply bold/italic formatting to backtick-enclosed string (instead of applying within the backticks), then put the code spans side by side so that they render as a single code span.

Formatting (bold and italic) in emulated code block

Huge drawback: no syntax highlighting

  1. Bold formatting

    > `sample`**`sample`**`sample`
    

    outputs as:

    samplesamplesample

  2. Italics formatting

    > *`rename`*`'s/\.bak$//' *.bak`
    

    outputs as:

    rename's/\.bak$//' *.bak

Formatting in code span

  1. Bold formatting

    `one`**`two`**`three`
    

    outputs as

    onetwothree

  2. Bold and italics side by side

    `one`**`two`**&#07;*`three`*
    

    outputs as

    onetwothree

    You need a non-printing character or a zero-width character (e.g. zero width space &#8203;) to separate the markdown for bold and markdown for italics.

Drawback

  1. Hackish, clumsy and unsightly (way less readable than its HTML counterpart)
  2. The emulated code block cannot be syntax highlighted compared to a real code block
  3. When you line up two code spans (with different formatting) side by side, there is always a space in between.

    So it's not possible to apply say bold formatting to a string within double quotes like print "Hello world"; without a space between the string and quotes.

    `print "`**`Hello world`**`";`
    

    would render as

    print "Hello world";

  4. Others (left as exercise to the reader)

3
  • But how would you do this for code blocks (as opposed to inline code)?
    – Pacerier
    Feb 18, 2016 at 23:24
  • @Pacerier You could use the emulated code block (but I think it's going to be ugly if the site you're using has different background colors for code span and blockquotes) Feb 21, 2016 at 12:21
  • But if you mean something that uses markdown's code block, I don't think that's possible Feb 21, 2016 at 12:22
8

Make it an actual quote instead of a code fragment, by prefixing the text with > instead of four spaces.

The following markdown:

> sample **sample** sample

Gives:

sample sample sample

4
  • 11
    But then it's not code anymore…
    – slhck
    Jun 8, 2013 at 9:21
  • 2
    Yup, the question was originally about quotes, not code samples. Jun 8, 2013 at 9:22
  • 1
    Original question: "How can I make a word in a code sample bold?" May 3, 2017 at 15:04
  • 2
    @flamewave000: Original question: "How can I make a word in a quoted text bold?" The "code sample" part was edited in after this answer was posted. Jun 5, 2019 at 17:06

Not the answer you're looking for? Browse other questions tagged .