JSFiddle - React, Tailwind, and code Playground

HTML

<p class="pre">
	<span>add_image_size( 'square-thumb', 400, 400, array('center','top') );</span>
	<span>add_image_size( 'slider', 1350, 550, true );</span>
	<span>Malesuada integer diam senectus laoreet lobortis neque imperdiet vitae, pulvinar gravida cum elementum bibendum ac. Malesuada donec cum penatibus primis tellus nulla dui magna, sapien urna nascetur dictumst torquent per egestas ut, sagittis cras magnis porttitor mus auctor integer.</span>
	<span>add_image_size( 'featured-post', 897, 430, array('center','top') );</span>
</p>

SCSS

.pre {
	font-size: 16px;
	font-family: monospace;
	background-color: #303030;
	color: #e6be49;
	padding: 15px 20px;
	border-radius: 3px;
	counter-reset: line;
	position: relative;
	line-height: 1.3;
	text-align: left !important;
	margin: 0 !important;

	&::after {
		content: "";
		position: absolute;
		top: 15px;
		bottom: 15px;
		left: 40px;
		border-right: 1px solid #5e5e5e;
	}

	span {
		display: block;
		counter-increment: line;
		padding-left: 35px;

		&::before {
			content: counter(line);
			display: inline-block;
			margin-left: -34px;
			margin-right: 25px;
			color: #a0a0a0;
		}
	}
}