CSS label line numbers without pre-splitting lines into divs/list (output of Jekyll + Redcarpet + Pygments)

Question

There's a lot of results on Google for CSS-based line numbering for code samples. Unfortunately, it seems all of them assume that you have your individual lines of code in separate divs or lis. Is there an alternative technique for the case where the code exists in a single block?

For reference, this is an example of the HTML I have. (In case it matters, this is generated by Jekyll calling Redcarpet calling Pygments for a fenced code block in a Markdown based Jekyll blog post. To clarify, this is in a Jekyll post, not a Jekyll template/include.)

<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">class</span> <span class="nc">Main</span> <span class="o">{</span>
    <span class="kd">public</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">main</span><span class="o">(</span><span class="n">String</span><span class="o">[]</span> <span class="n">argv</span><span class="o">)</span> <span class="o">{</span>
        <span class="n">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"Hello world!"</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">}</span>
</code></pre></div>

It was rendered from the following Markdown.

```java
public class Main {
    public static void main(String[] argv) {
        System.out.println("Hello world!");
    }
}
```

Thanks in advance!

P. S. I would prefer not to add divs or lis, because that seems like it would cause artifacts with people's copy/paste.

Answer 1

You can use this CSS, continuing the pattern to 1000 like I've done in my Snippet:

.highlight pre {
  position: relative;
  overflow: hidden;
  padding-left: 2em;
}

.highlight pre:before {
  content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a 10";
  position: absolute;
  left: 0em;
  color: silver;
}

.highlight pre {
  position: relative;
  overflow: hidden;
  padding-left: 2em;
}

.highlight pre:before {
  content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a 10 \a 11 \a 12 \a 13 \a 14 \a 15 \a 16 \a 17 \a 18 \a 19 \a 20 \a 21 \a 22 \a 23 \a 24 \a 25 \a 26 \a 27 \a 28 \a 29 \a 30 \a 31 \a 32 \a 33 \a 34 \a 35 \a 36 \a 37 \a 38 \a 39 \a 40 \a 41 \a 42 \a 43 \a 44 \a 45 \a 46 \a 47 \a 48 \a 49 \a 50 \a 51 \a 52 \a 53 \a 54 \a 55 \a 56 \a 57 \a 58 \a 59 \a 60 \a 61 \a 62 \a 63 \a 64 \a 65 \a 66 \a 67 \a 68 \a 69 \a 70 \a 71 \a 72 \a 73 \a 74 \a 75 \a 76 \a 77 \a 78 \a 79 \a 80 \a 81 \a 82 \a 83 \a 84 \a 85 \a 86 \a 87 \a 88 \a 89 \a 90 \a 91 \a 92 \a 93 \a 94 \a 95 \a 96 \a 97 \a 98 \a 99 \a 100 \a 101 \a 102 \a 103 \a 104 \a 105 \a 106 \a 107 \a 108 \a 109 \a 110 \a 111 \a 112 \a 113 \a 114 \a 115 \a 116 \a 117 \a 118 \a 119 \a 120 \a 121 \a 122 \a 123 \a 124 \a 125 \a 126 \a 127 \a 128 \a 129 \a 130 \a 131 \a 132 \a 133 \a 134 \a 135 \a 136 \a 137 \a 138 \a 139 \a 140 \a 141 \a 142 \a 143 \a 144 \a 145 \a 146 \a 147 \a 148 \a 149 \a 150 \a 151 \a 152 \a 153 \a 154 \a 155 \a 156 \a 157 \a 158 \a 159 \a 160 \a 161 \a 162 \a 163 \a 164 \a 165 \a 166 \a 167 \a 168 \a 169 \a 170 \a 171 \a 172 \a 173 \a 174 \a 175 \a 176 \a 177 \a 178 \a 179 \a 180 \a 181 \a 182 \a 183 \a 184 \a 185 \a 186 \a 187 \a 188 \a 189 \a 190 \a 191 \a 192 \a 193 \a 194 \a 195 \a 196 \a 197 \a 198 \a 199 \a 200 \a 201 \a 202 \a 203 \a 204 \a 205 \a 206 \a 207 \a 208 \a 209 \a 210 \a 211 \a 212 \a 213 \a 214 \a 215 \a 216 \a 217 \a 218 \a 219 \a 220 \a 221 \a 222 \a 223 \a 224 \a 225 \a 226 \a 227 \a 228 \a 229 \a 230 \a 231 \a 232 \a 233 \a 234 \a 235 \a 236 \a 237 \a 238 \a 239 \a 240 \a 241 \a 242 \a 243 \a 244 \a 245 \a 246 \a 247 \a 248 \a 249 \a 250 \a 251 \a 252 \a 253 \a 254 \a 255 \a 256 \a 257 \a 258 \a 259 \a 260 \a 261 \a 262 \a 263 \a 264 \a 265 \a 266 \a 267 \a 268 \a 269 \a 270 \a 271 \a 272 \a 273 \a 274 \a 275 \a 276 \a 277 \a 278 \a 279 \a 280 \a 281 \a 282 \a 283 \a 284 \a 285 \a 286 \a 287 \a 288 \a 289 \a 290 \a 291 \a 292 \a 293 \a 294 \a 295 \a 296 \a 297 \a 298 \a 299 \a 300 \a 301 \a 302 \a 303 \a 304 \a 305 \a 306 \a 307 \a 308 \a 309 \a 310 \a 311 \a 312 \a 313 \a 314 \a 315 \a 316 \a 317 \a 318 \a 319 \a 320 \a 321 \a 322 \a 323 \a 324 \a 325 \a 326 \a 327 \a 328 \a 329 \a 330 \a 331 \a 332 \a 333 \a 334 \a 335 \a 336 \a 337 \a 338 \a 339 \a 340 \a 341 \a 342 \a 343 \a 344 \a 345 \a 346 \a 347 \a 348 \a 349 \a 350 \a 351 \a 352 \a 353 \a 354 \a 355 \a 356 \a 357 \a 358 \a 359 \a 360 \a 361 \a 362 \a 363 \a 364 \a 365 \a 366 \a 367 \a 368 \a 369 \a 370 \a 371 \a 372 \a 373 \a 374 \a 375 \a 376 \a 377 \a 378 \a 379 \a 380 \a 381 \a 382 \a 383 \a 384 \a 385 \a 386 \a 387 \a 388 \a 389 \a 390 \a 391 \a 392 \a 393 \a 394 \a 395 \a 396 \a 397 \a 398 \a 399 \a 400 \a 401 \a 402 \a 403 \a 404 \a 405 \a 406 \a 407 \a 408 \a 409 \a 410 \a 411 \a 412 \a 413 \a 414 \a 415 \a 416 \a 417 \a 418 \a 419 \a 420 \a 421 \a 422 \a 423 \a 424 \a 425 \a 426 \a 427 \a 428 \a 429 \a 430 \a 431 \a 432 \a 433 \a 434 \a 435 \a 436 \a 437 \a 438 \a 439 \a 440 \a 441 \a 442 \a 443 \a 444 \a 445 \a 446 \a 447 \a 448 \a 449 \a 450 \a 451 \a 452 \a 453 \a 454 \a 455 \a 456 \a 457 \a 458 \a 459 \a 460 \a 461 \a 462 \a 463 \a 464 \a 465 \a 466 \a 467 \a 468 \a 469 \a 470 \a 471 \a 472 \a 473 \a 474 \a 475 \a 476 \a 477 \a 478 \a 479 \a 480 \a 481 \a 482 \a 483 \a 484 \a 485 \a 486 \a 487 \a 488 \a 489 \a 490 \a 491 \a 492 \a 493 \a 494 \a 495 \a 496 \a 497 \a 498 \a 499 \a 500 \a 501 \a 502 \a 503 \a 504 \a 505 \a 506 \a 507 \a 508 \a 509 \a 510 \a 511 \a 512 \a 513 \a 514 \a 515 \a 516 \a 517 \a 518 \a 519 \a 520 \a 521 \a 522 \a 523 \a 524 \a 525 \a 526 \a 527 \a 528 \a 529 \a 530 \a 531 \a 532 \a 533 \a 534 \a 535 \a 536 \a 537 \a 538 \a 539 \a 540 \a 541 \a 542 \a 543 \a 544 \a 545 \a 546 \a 547 \a 548 \a 549 \a 550 \a 551 \a 552 \a 553 \a 554 \a 555 \a 556 \a 557 \a 558 \a 559 \a 560 \a 561 \a 562 \a 563 \a 564 \a 565 \a 566 \a 567 \a 568 \a 569 \a 570 \a 571 \a 572 \a 573 \a 574 \a 575 \a 576 \a 577 \a 578 \a 579 \a 580 \a 581 \a 582 \a 583 \a 584 \a 585 \a 586 \a 587 \a 588 \a 589 \a 590 \a 591 \a 592 \a 593 \a 594 \a 595 \a 596 \a 597 \a 598 \a 599 \a 600 \a 601 \a 602 \a 603 \a 604 \a 605 \a 606 \a 607 \a 608 \a 609 \a 610 \a 611 \a 612 \a 613 \a 614 \a 615 \a 616 \a 617 \a 618 \a 619 \a 620 \a 621 \a 622 \a 623 \a 624 \a 625 \a 626 \a 627 \a 628 \a 629 \a 630 \a 631 \a 632 \a 633 \a 634 \a 635 \a 636 \a 637 \a 638 \a 639 \a 640 \a 641 \a 642 \a 643 \a 644 \a 645 \a 646 \a 647 \a 648 \a 649 \a 650 \a 651 \a 652 \a 653 \a 654 \a 655 \a 656 \a 657 \a 658 \a 659 \a 660 \a 661 \a 662 \a 663 \a 664 \a 665 \a 666 \a 667 \a 668 \a 669 \a 670 \a 671 \a 672 \a 673 \a 674 \a 675 \a 676 \a 677 \a 678 \a 679 \a 680 \a 681 \a 682 \a 683 \a 684 \a 685 \a 686 \a 687 \a 688 \a 689 \a 690 \a 691 \a 692 \a 693 \a 694 \a 695 \a 696 \a 697 \a 698 \a 699 \a 700 \a 701 \a 702 \a 703 \a 704 \a 705 \a 706 \a 707 \a 708 \a 709 \a 710 \a 711 \a 712 \a 713 \a 714 \a 715 \a 716 \a 717 \a 718 \a 719 \a 720 \a 721 \a 722 \a 723 \a 724 \a 725 \a 726 \a 727 \a 728 \a 729 \a 730 \a 731 \a 732 \a 733 \a 734 \a 735 \a 736 \a 737 \a 738 \a 739 \a 740 \a 741 \a 742 \a 743 \a 744 \a 745 \a 746 \a 747 \a 748 \a 749 \a 750 \a 751 \a 752 \a 753 \a 754 \a 755 \a 756 \a 757 \a 758 \a 759 \a 760 \a 761 \a 762 \a 763 \a 764 \a 765 \a 766 \a 767 \a 768 \a 769 \a 770 \a 771 \a 772 \a 773 \a 774 \a 775 \a 776 \a 777 \a 778 \a 779 \a 780 \a 781 \a 782 \a 783 \a 784 \a 785 \a 786 \a 787 \a 788 \a 789 \a 790 \a 791 \a 792 \a 793 \a 794 \a 795 \a 796 \a 797 \a 798 \a 799 \a 800 \a 801 \a 802 \a 803 \a 804 \a 805 \a 806 \a 807 \a 808 \a 809 \a 810 \a 811 \a 812 \a 813 \a 814 \a 815 \a 816 \a 817 \a 818 \a 819 \a 820 \a 821 \a 822 \a 823 \a 824 \a 825 \a 826 \a 827 \a 828 \a 829 \a 830 \a 831 \a 832 \a 833 \a 834 \a 835 \a 836 \a 837 \a 838 \a 839 \a 840 \a 841 \a 842 \a 843 \a 844 \a 845 \a 846 \a 847 \a 848 \a 849 \a 850 \a 851 \a 852 \a 853 \a 854 \a 855 \a 856 \a 857 \a 858 \a 859 \a 860 \a 861 \a 862 \a 863 \a 864 \a 865 \a 866 \a 867 \a 868 \a 869 \a 870 \a 871 \a 872 \a 873 \a 874 \a 875 \a 876 \a 877 \a 878 \a 879 \a 880 \a 881 \a 882 \a 883 \a 884 \a 885 \a 886 \a 887 \a 888 \a 889 \a 890 \a 891 \a 892 \a 893 \a 894 \a 895 \a 896 \a 897 \a 898 \a 899 \a 900 \a 901 \a 902 \a 903 \a 904 \a 905 \a 906 \a 907 \a 908 \a 909 \a 910 \a 911 \a 912 \a 913 \a 914 \a 915 \a 916 \a 917 \a 918 \a 919 \a 920 \a 921 \a 922 \a 923 \a 924 \a 925 \a 926 \a 927 \a 928 \a 929 \a 930 \a 931 \a 932 \a 933 \a 934 \a 935 \a 936 \a 937 \a 938 \a 939 \a 940 \a 941 \a 942 \a 943 \a 944 \a 945 \a 946 \a 947 \a 948 \a 949 \a 950 \a 951 \a 952 \a 953 \a 954 \a 955 \a 956 \a 957 \a 958 \a 959 \a 960 \a 961 \a 962 \a 963 \a 964 \a 965 \a 966 \a 967 \a 968 \a 969 \a 970 \a 971 \a 972 \a 973 \a 974 \a 975 \a 976 \a 977 \a 978 \a 979 \a 980 \a 981 \a 982 \a 983 \a 984 \a 985 \a 986 \a 987 \a 988 \a 989 \a 990 \a 991 \a 992 \a 993 \a 994 \a 995 \a 996 \a 997 \a 998 \a 999 \a 1000 \a ";
  color: silver;
  position: absolute;
  left: 0em;
}

<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">class</span> <span class="nc">Main</span> <span class="o">{</span>
    <span class="kd">public</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">main</span><span class="o">(</span><span class="n">String</span><span class="o">[]</span> <span class="n">argv</span><span class="o">)</span> <span class="o">{</span>
        <span class="n">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"Hello world!"</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">}</span>
</code></pre></div>