count lines in pre

by Dru Dro

HTML

<script src="https://www.devart.com/entitydac/docs/highlight.pack.js"></script>
<script>
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();
</script>
<pre><code>implementation
{$R *.dfm}

uses
  EntityDAC.Enumerable,
  EntityDAC.Linq;

procedure TDemoMainForm.Button1Click(Sender: TObject);
var
  Depts: ILinqQueryable;
begin
  Depts := Linq.From(DemoDataModule.EntityContext1['Dept']).Select;
  MasterDataSet.SourceCollection := DemoDataModule.EntityContext1.GetEntities(Depts);

  MasterDataSet.Open;
end;</code></pre><pre><code>implementation
{$R *.dfm}

uses
  EntityDAC.Enumerable,
  EntityDAC.Linq;

procedure TDemoMainForm.Button1Click(Sender: TObject);
var
  Depts: ILinqQueryable;
begin
  Depts := Linq.From(DemoDataModule.EntityContext1['Dept']).Select;
  MasterDataSet.SourceCollection := DemoDataModule.EntityContext1.GetEntities(Depts);

  MasterDataSet.Open;
end;</code></pre>

CSS

pre { 
    border: 1px solid #ddd;
}
code{
    display: inline-block;
    padding: 0 0 0 10px;
}
.counter{
    color: #ddd;
    display: inline-block;
    border-right: 1px solid #ddd;
}


/*********************************************************************************************/


pre .subst,
pre .params,
pre .title {
  font-weight: normal;
  color: #000;
}

pre .comment,
pre .template_comment,
pre .javadoc,
pre .diff .header {
  color: #008000;
  font-style: italic;
}

pre .annotation,
pre .decorator,
pre .preprocessor,
pre .doctype,
pre .pi,
pre .chunk,
pre .shebang,
pre .apache .cbracket,
pre .input_number {
  color: #808000;
}

pre .tag,
pre .pi {
  background: #000;
}

pre .tag .title,
pre .id,
pre .attr_selector,
pre .pseudo,
pre .literal,
pre .keyword,
pre .hexcolor,
pre .css .function,
pre .ini .title,
pre .css .class,
pre .list .title,
pre .tex .command {
  font-weight: bold;
  color: #000080;
}

pre .attribute,
pre .rules .keyword,
pre .number,
pre .date,
pre .regexp,
pre .tex .special {
  font-weight: bold;
  color: #0000cc;
}

pre .number,
pre .regexp {
  font-weight: normal;
}

pre .string,
pre .value,
pre .filter .argument,
pre .css .function .params,
pre .apache .tag {
  color: #0000cc;
  font-weight: bold;
}

pre .string {
  font-weight: normal;
 }

  
pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .char,
pre .tex .formula {
  color: #000;
  background: #d0eded;
  font-style: italic;
}

pre .phpdoc,
pre .yardoctag,
pre .javadoctag {
  text-decoration: underline;
}

pre .variable,
pre .envvar,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #660e7a;
}

pre .addition {
  background: #baeeba;
}

pre .deletion {
  background: #ffc8bd;
}

pre .diff .change {
  background: #bccff9;
}

pre .ifdef,
pre .endif {
  color: #3C9FA1
}

JavaScript

$('pre').each(function(){
    $(this).prepend('<ol class="counter"></ol>');
    var a = $(this).text().split('\n').length;
    for (i=1;i<=a;i++){
    $(this).find('ol').append('<li></li>');
}
});