CODEWITHSUNDEEP
htmlwordpress
Pwnna
Pwnna

Reputation: 9538

Inline pre formatting?

This should be easy points as I forgot how and can't find it on Google.

How do I accomplish something like this:

Blah Blah Blah some code Blah Blah

in wordpress? pre doesn't work as it will give a line break.

Upvotes: 64

Views: 26771

Answers (4)

Manu-Eu
Manu-Eu

Reputation: 31

In this case is better to use <code>, it has a more semantic html syntax and any css workaround won't be needed to make it inline

p {
  font-family: sans-serif
}

code {
  background: #c7c7c7;
  padding: .1rem .2rem;
  border-radius: .2rem;
}
<p>
  Some text <code>some code</code> some text 
</p>

Upvotes: 0

Jason S
Jason S

Reputation: 189786

It may be better to use <code> than <pre> to display inline code, for two reasons:

  • it's treated as inline
  • the semantics of <code> are a much better match than <pre>

But definitely use CSS classes (as @Blender points out).

There's a caveat: <code> doesn't escape <> brackets, so if you want to display HTML then you have to manually escape brackets as &lt; and &gt;. (which you should really do anyway; tags in HTML really should be clearly distinguished from data)

Upvotes: 65

Blender
Blender

Reputation: 298364

You can have an inline <pre> by adding some custom CSS to your theme's stylesheet:

pre.inline {
   display: inline;
}

Now, when you write:

I am some <pre class="inline">code, see?</pre> Foo.

It shows up like this:

I am some code, see? Foo.

Upvotes: 15

jwodder
jwodder

Reputation: 57590

<tt>text</tt> gives text

Wait... Wordpress? What HTML tags does it support?

Upvotes: 34

Related Questions