Questions tagged [pre]

The

 element in HTML represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed. It is usually used for showing computer code or output.

The <pre> element in HTML represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed. It is usually used for showing computer code or output.

384 questions
216
votes
19 answers

How to insert spaces/tabs in text using HTML/CSS

Possible ways:
 ... 
or style="white-space:pre" Anything else?
Yeseanul
  • 2,787
  • 4
  • 21
  • 25
122
votes
4 answers

Display element as preformatted text via CSS

Is there any way to emulate the display of a pre element via CSS? For example, can I keep the whitespace intact in this div by using a CSS rule?
Please procure the following items: - Soup - Jam - Hyphens …
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
100
votes
8 answers

How to escape < and > inside
 tags

I'm trying to write a blog post which includes a code segment inside a
 tag. The code segment includes a generic type and uses <> to define that type. This is what the segment looks like:
    PrimeCalc calc = new PrimeCalc();
   …
urini
  • 32,483
  • 14
  • 40
  • 37
70
votes
8 answers

How to display raw HTML code in PRE or something like it but without escaping it

I'd like to display raw HTML. We all know one has to escape each "<" and ">" like this:
 this is a test  <DIV> 
However, I do not want to do this. I'd like a way to keep the HTML code as is (since it is easier to read, (inside…
Robert H
  • 1,603
  • 2
  • 17
  • 19
66
votes
4 answers

Is it possible to make any CSS element behave like

I am loading some content inside an iframe. I want this content to behave as-if it was inside a
 tag - namely for it to respect line breaks.  I am using javascript to set the style of the body element of this iframe.
I am wondering if it would…
chaimp
  • 16,897
  • 16
  • 53
  • 86
61
votes
4 answers

How to make Twitter Bootstrap's
 blocks scroll horizontally?

Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped
 blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks…
Suan
  • 34,563
  • 13
  • 47
  • 61
56
votes
11 answers

How to preserve whitespace indentation of text enclosed in HTML
 tags excluding the current indentation level of the 
 tag in the document?

I'm trying to display my code on a website but I'm having problems preserving the whitespace indentation correctly. For instance given the following snippet: Here is my code:
     def some_funtion
       return 'Hello,…
Michael Barton
  • 8,868
  • 9
  • 35
  • 43
55
votes
6 answers

HTML
 tag values get horizontal scroll bars,how to format it?

This is my blog page. Sometimes I have to use C#,PHP and other code snippets in the blog. Therefore I use pre tags to make it looks nice and keep the formatting code as it is. pre tag width is 100% and it has a background colour. However, the text…
Elshan
  • 7,339
  • 4
  • 71
  • 106
42
votes
9 answers

How to use css to change
 font size

pre{font-family:cursive;font-style:italic;font-size:xxx-small} How to change pre font size?
user289346
  • 487
  • 2
  • 6
  • 7
36
votes
3 answers

How can I remove leading whitespace in my
/ block without removing indentation in my HTML?

I have the following HTML: Here is some code:

        Here is some fun code!    
    
But when I preview it, because the code is indented, the pre is all out of whack. I can fix that by bringing the…
Doug Smith
  • 29,668
  • 57
  • 204
  • 388
22
votes
4 answers

 tag adds gap above itself?

I have the following HTML:

Embed Code

  
<script type="text/javascript">
  var something = 'else';
</script>
  
And the following CSS: h2 { background:#1e7ca2; font-weight: 100; …
Shpigford
  • 24,748
  • 58
  • 163
  • 252
19
votes
9 answers

HTML
 tag causes linebreaks

I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between…
monojohnny
  • 5,894
  • 16
  • 59
  • 83
17
votes
4 answers

how to set the text of a pre tag using jquery

I'm using a pre tag to hold some raw formated text that has carriage returns. When the page is first displayed, it looks fine. Later, I want to refresh just the pre data. I've tried two ways to do this with jquery, one using .html() and the other…
Knox
  • 2,909
  • 11
  • 37
  • 65
16
votes
11 answers

Inserting a newline into a pre tag (IE, Javascript)

In IE when I insert text into a
 tag the newlines are ignored:




Using \r\n instead of a plain…
Itay Maman
  • 30,277
  • 10
  • 88
  • 118
16
votes
5 answers

Syntax highlighting in
 tags

Are there any libraries that will allow me to display code in
 tags and highlight the syntax according to the language? I'm imagining something like this:
class MyClass:
    """A simple example class"""
    i = 12345
   …
Joe Mornin
  • 8,766
  • 18
  • 57
  • 82
1
2 3
25 26