jekyll changing pre to p and adding th/td to tables - jekyll

I'm trying to regenerate my site with jekyll but it's changing pre to p and adding th/td to tables.
Here's an example diff of the pre to p problem. The - indicates a line that was replaced with a + line. The code in markdown hasn't changed.
Diff
-<pre><code>-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
-</code></pre>
+<p><code>
+-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
+</code></p>
Markdown
```
RunScriptOnNode.Factory .runScript → create submit → submit
```
Here's an example diff of the th/td problem. The + indicates a new column that wasn't generated before and definitely isn't in my markdown file.
Diff
<table>
<thead>
<tr>
+ <th></th>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
</thead>
<tbody>
<tr>
+ <td></td>
<td> Value 1.1 </td>
<td> Value 1.2</td>
</tr>
<tr>
+ <td></td>
<td> Value 2.1 </td>
<td> Value 2.2 </td>
</tr>
...
Markdown
| Column 1 | Column 2 |
|------------|---------------------|
| Value 1.1 | Value 1.2
| Value 2.1 | Value 2.2
Why is jekyll doing this to my generated HTML files?

In these situations, it's wise to verify the versions of your markdown engine and/or if you can get the desired result by changing engines. :)

Related

Angular 2+ : Condition based on previous index date value ngIf NgFor

Trying to format a table using Angular where:
If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.
1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.
2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.
3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.
Please could someone help correct this code or point me in the right direction
Thanks
<table class="table-striped">
<thead>
<tr>
<td>day</td>
<td>time</td>
<td>region</td>
<td>event</td>
<td>period</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let eco of eco_r ; let i = index">
<template [ngIf]="eco.date != eco[i-1].date">
<td colspan="5">{{eco.datetime| date:'longDate' }}</td>
<tr>
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
<template [ngIf]="eco.date == eco[i-1].date">
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</template>
</tr>
</tbody>
</table>
------------UPDATE ---------------
Following #Iancovici comments I have revised the following
i) corrected to reference eco_r[i-1].date
ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions
iii) updated code to only check previous value when i > 0
I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?
Thanks
<template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
<tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
</tr>
<tr> <td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
Should probbly be *ngIf not [ngIf] in general. But I see in your case it’s ok because you’re using an ng template which means instead of directive *ngIf it’s not a bonded property [ngIf]
Also you're accesing the same instance, should access index of array instead so..
change from
*ngIf="eco.date == eco[i-1].date">
to
*ngIf="eco.date == eco_r[i-1].date">
Update: Two more notes
Make sure you create a table, with tag
Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.
Try this without the filters, then integrate the filters in.
<table>
<div *ngFor="let eco of eco_r; let i = index">
<div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
<tr>
<td colspan="5">{{eco.datetime }}</td>
</tr>
<tr>
<td>{{eco.datetime }}</td>
<td>{{eco.datetime }}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</div>
</div>
</table>

Count <tr> HTML tag grouped by their #class attribute name in XPath

I need a XPath expression that count all the <tr> rows that have a starting class attribute string: room_loop_counter grouped by their attribute name itself.
I have the following sample HTML code to extract data from:
<tbody id="container" >
<tr class="room_loop_counter1 maintr">
<td class="legibility " rowspan="6"></td>
<td colspan="4" style="padding:0;"></td>
</tr>
<tr class="room_loop_counter1">
<td ></td>
<td class=""></td>
</tr>
<tr class="room_loop_counter1"></tr>
<tr class="room_loop_counter2 maintr divider"></tr>
<tr class="room_loop_counter2"></tr>
<tr class="room_loop_counter3 maintr divider"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
</tbody>
Given the above HTML I would want to get as result : 2,1,4. The count is the number of elements minus one, since I want to discard from the count the first <tr>(the one with the maintr) that is the header...
Between <tr> elements there could be other <tr> elements so their are not strictly one after the other, so we can't rely on following or preceding sibling logic.
I've tried with the following XPath expression :
count(//table[#id="maxotel_rooms"]/tbody/tr[#class=distinct-values(//table[#id="maxotel_rooms"]/tbody/tr[starts-with(#class, "room_loop_counter") and not(contains(#class, "maintr"))]/#class)]/#class])
but it doesn't work on chrome(evaluating it with $x('') on the console window) since it doesn't recognize the distinct-values function.
Could you suggest a possible solution? What is the best approach ?
Check this XPath for unique tr with class starts with some data and not followed by some other class name.
//tbody/tr[starts-with(#class, "room_loop_counter") and not(contains(#class, "maintr"))]/following::tr[not(./#class=following::tr/#class) and not(contains(#class, "maintr"))]
Javascript:
var path = "//body/div";
var uniquePathCount = window.document.evaluate('count(' + path + ')', window.document, null, 0, null);
console.log( uniquePathCount );
console.log( uniquePathCount.numberValue );
Ouput:
<tr class="room_loop_counter1"/>
<tr class="room_loop_counter2"/>
<tr class="room_loop_counter3"/>

How to reverse the order of my $index in AngularJS

I have a table like in the picture,when the stop button is clicked the record gets stored in the first row not in the last row because I ORDER BY EndTime DESC in SQL,but now I want the Record column to be in reversed.How can I do that?
HTML:
<tr ng-repeat="previousdowntime in Model.PreviousDowntimeEvents | orderBy:'$index':true">
<td>{{$index + 1}}</td>
<td>{{Model.GetDowntimeText(previousdowntime.CategoryId)}}</td>
<td><span ng-bind="previousdowntime.StartTime|date:'shortTime'"></span></td>
<td><span ng-bind="previousdowntime.EndTime|date:'shortTime'"></span></td>
<td>{{previousdowntime.Comment}}</td>
<td>{{previousdowntime.TotalMinutes}} minutes</td>
</tr>
The $ variables in the ng-repeat are tools you should use, not change.
If you only want to reverse the values in the Records column use simple maths: {{Model.PreviousDowntimeEvents.length - $index}}
<tr ng-repeat="previousdowntime in Model.PreviousDowntimeEvents | orderBy:'$index':true">
<td>{{Model.PreviousDowntimeEvents.length - $index}}</td>
<td>{{Model.GetDowntimeText(previousdowntime.CategoryId)}}</td>
<td><span ng-bind="previousdowntime.StartTime|date:'shortTime'"></span></td>
<td><span ng-bind="previousdowntime.EndTime|date:'shortTime'"></span></td>
<td>{{previousdowntime.Comment}}</td>
<td>{{previousdowntime.TotalMinutes}} minutes</td>
</tr>

Forcing table rows to appear on the same line using CSS

I have a two-row table like this:
---------------------------
| 1 Item | Total: $370.00 |
---------------------------
| View Cart Check-out |
---------------------------
I want it to display inline, like this:
| 1 Item | Total: $370.00 | View Cart Check-out |
Is this possible with CSS?
Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.
Simplified HTML:
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
</tr>
<tr class="cart-block-summary-links">
<td colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Worked for me:
​​table { width: 600px;}
tr{float:left}​
http://jsfiddle.net/N5fhU/
You could also remove the last TR that way it will look all in one line
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
<td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>

HTML Table Header using rowspan

<html>
<body>
<TABLE border="1" ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2"> Average
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
I'm getting the output with first element of header as blank
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
Expected output
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
Remove the extra TH in your code
http://jsfiddle.net/yqQsP/
<html>
<body>
<TABLE border="1" >
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
While nauphal has already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case is mandatory (and, frankly, looks a little nicer too).
Second, because a tbody element is always inserted by the browser (I'm not sure about all clients, but certainly visual web-clients) if there isn't one present already, it's usually best to wrap those elements that represent the 'body' of the table in a tbody yourself, that way you can assign the th element-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
Third, remember to close your tags:
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
Should, really, be:
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
Again, it's not mandatory (in HTML 4, I believe), but it reduces the scope for errors introduced by having extra, un-closed, start-tags around your mark-up.
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the caption as emphasized text it's easier to avoid inserting extra mark-up and just style the caption directly.
That said, here's my version of your table and some CSS:
<table>
<caption>A test table with merged cells</caption>
<theader>
<tr>
<th colspan="2">Average</th>
<th rowspan="2">Red Eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
</theader>
<tbody>
<tr>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>​
CSS:
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}​
JS Fiddle.
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem