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.
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>
2 réponses
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>
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>
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].