1

Google 上有很多基于 CSS 的代码示例行编号结果。不幸的是，他们似乎都假设您将单独的代码行放在单独div的 s 或lis 中。对于代码存在于单个块中的情况，是否有替代技术？

作为参考，这是我拥有的 HTML 示例。（如果它很重要，这是由 Jekyll 调用 Redcarpet 为基于 Markdown 的 Jekyll 博客文章中的围栏代码块调用 Pygments 生成的。澄清一下，这是在 Jekyll 文章中，而不是 Jekyll 模板/包含。）

<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>

它是从以下 Markdown 呈现的。

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

提前致谢！

PS 我不希望添加divs 或lis，因为这似乎会导致人们复制/粘贴的伪影。

4

1 回答 1

2

您可以使用此 CSS，将模式继续到 1000，就像我在代码段中所做的那样：

.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>

于 2015-07-26T10:45:05.063 回答