143

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. Commented Jun 8, 2013 at 9:07
  • 2
    Re: your edit, there is no way to use markdown formatting inside code samples. By definition, content in code samples is rendered verbatim. Commented Jun 8, 2013 at 9:20

3 Answers 3

162

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.

9
  • 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? Commented 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
    Commented Nov 16, 2015 at 21:55
  • well, the line breaks are respected.. just that there's too many of them Commented Nov 17, 2015 at 1:13
  • 5
    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
    Commented 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? Commented May 5, 2020 at 8:47
  • @OttoAbnormalverbraucher Not that I am aware of, no.
    – slhck
    Commented 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
    Commented May 11, 2022 at 23:33
  • I get the following error on stackoverflow when trying to use that technique: "Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.". And that prevents me from posting an answer.
    – KIAaze
    Commented Oct 7, 2023 at 7:11
  • @KIAaze Well, code-only (or code-mostly) answers are discouraged, so, maybe your code (or whatever you were trying to format like code) needed more description around it. Commented May 17 at 16:28
45

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
    Commented 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) Commented Feb 21, 2016 at 12:21
  • But if you mean something that uses markdown's code block, I don't think that's possible Commented Feb 21, 2016 at 12:22
12

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
  • 14
    But then it's not code anymore…
    – slhck
    Commented Jun 8, 2013 at 9:21
  • 4
    Yup, the question was originally about quotes, not code samples. Commented Jun 8, 2013 at 9:22
  • 1
    Original question: "How can I make a word in a code sample bold?" Commented May 3, 2017 at 15:04
  • 6
    @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. Commented Jun 5, 2019 at 17:06

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