Skip to content

Instantly share code, notes, and snippets.

@julientaq

julientaq/something html

Created May 31, 2024 20:36
Show Gist options
  • Save julientaq/84088577c4829b1f4da532439dc53be3 to your computer and use it in GitHub Desktop.
Save julientaq/84088577c4829b1f4da532439dc53be3 to your computer and use it in GitHub Desktop.
Download ZIP
pagedjs mermaid and fix
Raw
something html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta charset="utf-8" />
<title>Example Doc Issue #206</title>
<script src="https://unpkg.com/pagedjs@0.5.0-beta.1/dist/paged.polyfill.js"></script>
<script>
class testMargin extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content) {
// run the figure in pagedjs hooks
mermaidFigureCorrection(content);
}
afterRendered(pages) {
document.querySelectorAll(".pagedjs_page").forEach((page) => {
// page.style.setProperty("--pagedjs-margin-bottom", "12mm")
console.log(page);
page.style.display ="none";
page.style.display ="block";
});
}
}
Paged.registerHandlers(testMargin);
//
// Correct mermaid graph figures
function mermaidFigureCorrection(content) {
let mermaids = content.querySelectorAll("img.mermaid");
for (let mermaid of mermaids) {
let figure = document.createElement("figure");
let figureCaption = document.createElement("figcaption");
figureCaption.textContent = mermaid.alt;
mermaid.after(figure);
figure.appendChild(mermaid);
figure.appendChild(figureCaption);
}
}
</script>
<style>
:root {
--table-column-border-color: #777;
--table-outer-border-color: #777;
--page-header-border-color: hsl(150deg 100% 65%);
--page-footer-border-color: hsl(20deg 100% 28%);
}
* {
/* break-inside: avoid; */
}
table {
width:100%;
}
table > td:first-of-type {
width: 20px;
}
tr {
break-inside: avoid;
}
table {
padding-bottom: 5px ;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
thead th {
text-align: left;
white-space: nowrap;
}
tr {
page-break-inside: avoid;
border-bottom: 1px solid var(--table-column-border-color);
}
@media print {
.debug-only {
display: none;
}
}
@page {
max-width: 100%;
max-width: 100vw;
border-top: 4px solid var(--page-header-border-color);
border-bottom: 4px solid var(--page-footer-border-color);
size: letter;
margin: 15.875mm 1in;
}
table {
border: 1px solid var(--table-outer-border-color);
width: 95%;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
risus at nulla mollis, eget tristique lorem fringilla. Sed mauris elit,
laoreet sed vehicula at, egestas id dolor. Sed maximus mattis ex, vitae
fringilla nisl facilisis hendrerit. Nulla arcu magna, accumsan non ligula
vel, ultricies ullamcorper justo. Aliquam porttitor id nisl vel imperdiet.
Sed ligula nisl, euismod quis urna sit amet, fermentum ultricies ex.
Curabitur pharetra facilisis nisi, vel luctus ante tempor eu.
</p>
<table>
<thead>
<tr class="header">
<th>Number</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>2</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>3</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>4</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>5</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>6</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>7</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>8</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>9</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>10</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>11</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>12</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>13</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>14</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>15</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>16</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>17</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>18</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>19</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>20</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>21</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>22</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>23</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>24</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>25</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>26</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>27</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>28</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>29</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>30</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>31</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>32</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>33</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>34</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>35</td>
<td>
Lorem ipsum dolor sit amet.
</td>
</tr>
<tr>
<td>36</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>37</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>38</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>39</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>40</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>41</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>42</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>43</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>44</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>45</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>46</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>47</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>48</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>49</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>50</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>51</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>52</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>53</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>54</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>55</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>56</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>57</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>58</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>59</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>60</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>61</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>62</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>63</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>64</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>65</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>66</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>67</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>68</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>69</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>70</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>71</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>72</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>73</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>74</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>75</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>76</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>77</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>78</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>79</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>80</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>81</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>82</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>83</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>84</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>85</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>86</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>87</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>88</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>89</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>90</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>91</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>92</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>93</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>94</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>95</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>96</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>97</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>98</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>99</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>100</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>101</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>102</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>103</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>104</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>105</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>106</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>107</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>108</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>109</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>110</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>111</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>112</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>113</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>114</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>115</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>116</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>117</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>118</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>119</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>120</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>121</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>122</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>123</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>124</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>125</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>126</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>127</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>128</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>129</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment