styliser une balise <pre>

Question

Dans la documentation de mon site Web, j'ai du code qui devrait être affiché pour suggérer à l'utilisateur comment il peut changer l'aspect et la convivialité du site Web en suivant le code affiché. Je ne veux pas utiliser l'image d'arrière-plan à l'intérieur de cette balise pre mais je veux un style pour cela. comme chaque ligne de code doit avoir une couleur d'arrière-plan alternative. J'ai lié l'image d'inspiration.

demo image

  pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
}

<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>

html css pre

1

Mohammed Wahed Khan 3 août 2017 à 10:09

Answer 1

Comme l'a dit @Mr Lister, utilisez des dégradés.

.my-pre{
  line-height:1.2em;
  background:linear-gradient(180deg,#ccc 0,#ccc 1.2em,#eee 0);
  background-size:2.4em 2.4em;
  background-origin:content-box;
  
  /* some extra styles*/
  padding:0 20px;
  text-align:justify;
  font-family:calibri,arial,sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<pre class="my-pre">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Voluptate ab pariatur assumenda ipsum exercitationem tempore
  architecto, adipisci, id nihil culpa molestias rerum, dolore alias?
  Fugit eos doloribus dolore, expedita officiis.
</pre>
</body>
</html>

6

Triby 3 août 2017 à 07:25

Answer 2

Comme mentionné par d'autres, vous pouvez utiliser linear gradiant

pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  background-color: #2f2f2f;
  background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding: 0em 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>

Approche simple,

$("pre").html(function (index, html) {
    return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
});

pre {
  counter-reset: line-numbering;
  background: #2c3e50;
  padding: 12px 0px 14px 0;
  width: 600px;
  color: #ecf0f1;
  line-height: 100%;
}

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  padding-left: 8px;
  width: 1.5em;
  text-align: right;
  opacity: 0.5;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>

Avec les numéros de ligne,

$("pre").html(function(index, html) {
  return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
});

pre {
  counter-reset: line-numbering;
  background: #2c3e50;
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  background-color: #2f2f2f;
  background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding: 0em 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  padding-left: 8px;
  width: 1.5em;
  text-align: right;
  opacity: 0.5;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
	width: 1200px;
	margin: 0 auto;
	text-align: center;
	font-size: 24px;
	font-family: 'lato', sans-serif;
}
</pre>

-1

Hash 3 août 2017 à 08:41

styliser une balise <pre>

2 réponses

Questions connexes

De nouvelles questions

html