8000 Fix code fencing on index · leetcode/reactable@daabdc7 · GitHub
[go: up one dir, main page]
Skip to content

Commit daabdc7

Browse files
glittersharkglittershark
committed
Fix code fencing on index
1 parent 15f05e2 commit daabdc7

File tree

2 files changed

+36
-34
lines changed

2 files changed

+36
-34
lines changed

‎_site/index.html

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ <h2 id="usage">Usage</h2>
7272

7373
<p>The simplest example:</p>
7474

75-
<div><div class="CodeRay">
75+
<div class="highlighter-coderay"><div class="CodeRay">
7676
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span><span style="color:#080;font-weight:bold">var</span> Table = Reactable.Table;
7777
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span>React.renderComponent(
7878
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span> <span style="color:#070;font-weight:bold">&lt;Table</span> <span style="color:#b48">className</span>=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> <span style="color:#b48">data</span>=<span style="color:#F00;background-color:#FAA">{</span><span style="color:#F00;background-color:#FAA">[</span>
@@ -98,7 +98,7 @@ <h3 id="further-customization">Further Customization</h3>
9898
This approach can be freely combined with the <code>data</code> property on the <code>&lt;Table&gt;</code>,
9999
and is useful if you want to specify per-row attributes such as classes, like so:</p>
100100

101-
<div><div class="CodeRay">
101+
<div class="highlighter-coderay"><div class="CodeRay">
102102
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span><span style="color:#080;font-weight:bold">var</span> Table = Reactable.Table,
103103
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span> Tr = Reactable.Tr;
104104
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span>
@@ -126,7 +126,7 @@ <h3 id="even-more-customization">Even More Customization</h3>
126126

127127
<p>Example:</p>
128128

129-
<div><div class="CodeRay">
129+
<div class="highlighter-coderay"><div class="CodeRay">
130130
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span><span style="color:#080;font-weight:bold">var</span> Table = Reactable.Table,
131131
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span> Tr = Reactable.Tr,
132132
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span> Td = Reactable.Td;
@@ -172,32 +172,35 @@ <h3 id="preventing-escaping-of-html">Preventing escaping of HTML</h3>
172172

173173
<p>If you don’t want to go all the way down the JSX rabbit hole to render individual cells as
174174
HTML, and you know your source data is safe, you can wrap strings in <code>Reactable.unsafe</code> to
175-
prevent their content from being escaped, like so:
176-
~~~javascript
177-
var Table = Reactable.Table,
178-
unsafe = Reactable.unsafe;</p>
179-
180-
<p>React.renderComponent(
181-
&lt;Table className=”table” id=”table” data={[
182-
{
183-
‘Name’: unsafe(‘<b>Griffin Smith</b>’),
184-
‘Github’: unsafe(‘<a href="https://github.com/glittershark"><img src="https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png" /></a>’)
185-
},
186-
{
187-
‘Name’: unsafe(‘<b>Ian Zhang</b>’),
188-
‘Github’: unsafe(‘<a href="https://github.com/lofiinterstate"><img src="https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png" /></a>’)
189-
},
190-
]}/&gt;,
191-
document.getElementById(‘table’)
192-
);
193-
~~~</p>
175+
prevent their content from being escaped, like so:</p>
176+
177+
<div class="highlighter-coderay"><div class="CodeRay">
178+
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span><span style="color:#080;font-weight:bold">var</span> Table = Reactable.Table,
179+
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span> unsafe = Reactable.unsafe;
180+
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span>
181+
<span class="line-numbers"> <a href="#n4" name="n4">4</a></span>React.renderComponent(
182+
<span class="line-numbers"> <a href="#n5" name="n5">5</a></span> &lt;Table className=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> id=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> data={[
183+
<span class="line-numbers"> <a href="#n6" name="n6">6</a></span> {
184+
<span class="line-numbers"> <a href="#n7" name="n7">7</a></span> <span style="color:#606"><span style="color:#404">'</span><span>Name</span><span style="color:#404">'</span></span>: unsafe(<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">&lt;b&gt;Griffin Smith&lt;/b&gt;</span><span style="color:#710">'</span></span>),
185+
<span class="line-numbers"> <a href="#n8" name="n8">8</a></span> <span style="color:#606"><span style="color:#404">'</span><span>Github</span><span style="color:#404">'</span></span>: unsafe(<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">&lt;a href=&quot;https://github.com/glittershark&quot;&gt;&lt;img src=&quot;https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png&quot;&gt;&lt;/a&gt;</span><span style="color:#710">'</span></span>)
186+
<span class="line-numbers"> <a href="#n9" name="n9">9</a></span> },
187+
<span class="line-numbers"><strong><a href="#n10" name="n10">10</a></strong></span> {
188+
<span class="line-numbers"><a href="#n11" name="n11">11</a></span> <span style="color:#606"><span style="color:#404">'</span><span>Name</span><span style="color:#404">'</span></span>: unsafe(<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">&lt;b&gt;Ian Zhang&lt;/b&gt;</span><span style="color:#710">'</span></span>),
189+
<span class="line-numbers"><a href="#n12" name="n12">12</a></span> <span style="color:#606"><span style="color:#404">'</span><span>Github</span><span style="color:#404">'</span></span>: unsafe(<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">&lt;a href=&quot;https://github.com/lofiinterstate&quot;&gt;&lt;img src=&quot;https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png&quot;&gt;&lt;/a&gt;</span><span style="color:#710">'</span></span>)
190+
<span class="line-numbers"><a href="#n13" name="n13">13</a></span> },
191+
<span class="line-numbers"><a href="#n14" name="n14">14</a></span> ]}/&gt;,
192+
<span class="line-numbers"><a href="#n15" name="n15">15</a></span> document.getElementById(<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">table</span><span style="color:#710">'</span></span>)
193+
<span class="line-numbers"><a href="#n16" name="n16">16</a></span>);
194+
</pre></div>
195+
</div>
196+
</div>
194197

195198
<h3 id="pagination">Pagination</h3>
196199

197200
<p>You can also use pagination, by just specifying an <code>itemsPerPage</code> argument to the
198201
<code>&lt;Table&gt;</code> component. For example:</p>
199202

200-
<div><div class="CodeRay">
203+
<div class="highlighter-coderay"><div class="CodeRay">
201204
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span><span style="color:#070;font-weight:bold">&lt;Table</span> <span style="color:#b48">className</span>=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> <span style="color:#b48">data</span>=<span style="color:#F00;background-color:#FAA">{</span><span style="color:#F00;background-color:#FAA">[</span>
202205
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span> <span style="color:#F00;background-color:#FAA">{</span> <span style="color:#700">Name:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Griffin</span> <span style="color:#b48">Smith</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#b48">Age:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">18</span><span style="color:#F00;background-color:#FAA">'</span> <span style="color:#F00;background-color:#FAA">}</span><span style="color:#F00;background-color:#FAA">,</span>
203206
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span> <span style="color:#F00;background-color:#FAA">{</span> <span style="color:#b48">Age:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">23</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#b48">Name:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Lee</span> <span style="color:#b48">Salminen</span><span style="color:#F00;background-color:#FAA">'</span> <span style="color:#F00;background-color:#FAA">}</span><span style="color:#F00;background-color:#FAA">,</span>
@@ -230,9 +233,8 @@ <h3 id="sorting">Sorting</h3>
230233

231234
<p>To specify a custom sort function, use the following structure for the column object:</p>
232235

233-
<div><div class="CodeRay">
234-
<div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span>
235-
<span class="line-numbers"><a href="#n2" name="n2">2</a></span>{<span style="color:#606">column</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Column Name</span><span style="color:#710">'</span></span>, <span style="color:#06B;font-weight:bold">sortFunction</span>: <span style="color:#080;font-weight:bold">function</span>(a, b){} }
236+
<div class="highlighter-coderay"><div class="CodeRay">
237+
<div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span>{<span style="color:#606">column</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Column Name</span><span style="color:#710">'</span></span>, <span style="color:#06B;font-weight:bold">sortFunction</span>: <span style="color:#080;font-weight:bold">function</span>(a, b){} }
236238
</pre></div>
237239
</div>
238240
</div>
@@ -241,16 +243,15 @@ <h3 id="sorting">Sorting</h3>
241243
with a column and a <code>direction</code> paramenter of either <code>asc</code> or <code>desc</code>.
242244
If no direction is specified, the default sort will be ascending. Example:</p>
243245

244-
<div><div class="CodeRay">
245-
<div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span>
246-
<span class="line-numbers"><a href="#n2" name="n2">2</a></span>{<span style="color:#606">column</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Column Name</span><span style="color:#710">'</span></span>, <span style="color:#606">direction</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">asc</span><span style="color:#710">'</span></span> }
246+
<div class="highlighter-coderay"><div class="CodeRay">
247+
<div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span>{<span style="color:#606">column</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Column Name</span><span style="color:#710">'</span></span>, <span style="color:#606">direction</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">asc</span><span style="color:#710">'</span></span> }
247248
</pre></div>
248249
</div>
249250
</div>
250251

251252
<p>Combined example:</p>
252253

253-
<div><div class="CodeRay">
254+
<div class="highlighter-coderay"><div class="CodeRay">
254255
<div class="code"><pre><span class="line-numbers"> <a href="#n1" name="n1">1</a></span>&lt;Table className=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> id=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> data={[
255256
<span class="line-numbers"> <a href="#n2" name="n2">2</a></span> { <span style="color:#606">Name</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Lee Salminen</span><span style="color:#710">'</span></span>, <span style="color:#606">Age</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">23</span><span style="color:#710">'</span></span>, <span style="color:#606">Position</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Programmer</span><span style="color:#710">'</span></span>},
256257
<span class="line-numbers"> <a href="#n3" name="n3">3</a></span> { <span style="color:#606">Name</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Griffin Smith</span><span style="color:#710">'</span></span>, <span style="color:#606">Age</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">18</span><span style="color:#710">'</span></span>, <span style="color:#606">Position</span>: <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Engineer</span><span style="color:#710">'</span></span>},
@@ -274,15 +275,16 @@ <h3 id="sorting">Sorting</h3>
274275
<span class="line-numbers"><a href="#n21" name="n21">21</a></span><span style="background-color:hsla(300,100%,50%,0.06)"><span style="color:#808"></span></span></pre></div>
275276
</div>
276277
</div>
277-
<p>### Filtering</p>
278+
279+
<h3 id="filtering">Filtering</h3>
278280

279281
<p>You can do simple case-insensitive filtering by specifying a filterable property on the table. This
280282
property should contain a list of columns which the filter is performed on. If the filterable property
281283
is provided, then an input box with class reactable-filter-input will be prepended to the thead of the table.</p>
282284

283285
<p>Example:</p>
284286

285-
<div><div class="CodeRay">
287+
<div class="highlighter-coderay"><div class="CodeRay">
286288
<div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span><span style="color:#070;font-weight:bold">&lt;Table</span> <span style="color:#b48">className</span>=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> <span style="color:#b48">id</span>=<span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">&quot;</span><span style="color:#D20">table</span><span style="color:#710">&quot;</span></span> <span style="color:#b48">data</span>=<span style="color:#F00;background-color:#FAA">{</span><span style="color:#F00;background-color:#FAA">[</span>
287289
<span class="line-numbers"><a href="#n2" name="n2">2</a></span> <span style="color:#F00;background-color:#FAA">{</span><span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">State</span><span style="color:#710">'</span></span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">New</span> <span style="color:#b48">York</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Description</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">this</span> <span style="color:#b48">is</span> <span style="color:#b48">some</span> <span style="color:#b48">text</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Tag</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">new</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">}</span><span style="color:#F00;background-color:#FAA">,</span>
288290
<span class="line-numbers"><a href="#n3" name="n3">3</a></span> <span style="color:#F00;background-color:#FAA">{</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">State</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">New</span> <span style="color:#b48">Mexico</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Description</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">lorem</span> <span style="color:#b48">ipsum</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">,</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">Tag</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">:</span> <span style="color:#F00;background-color:#FAA">'</span><span style="color:#b48">old</span><span style="color:#F00;background-color:#FAA">'</span><span style="color:#F00;background-color:#FAA">}</span><span style="color:#F00;background-color:#FAA">,</span>

‎index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ either:
130130
If you don't want to go all the way down the JSX rabbit hole to render individual cells as
131131
HTML, and you know your source data is safe, you can wrap strings in `Reactable.unsafe` to
132132
prevent their content from being escaped, like so:
133+
133134
~~~javascript
134135
var Table = Reactable.Table,
135136
unsafe = Reactable.unsafe;
@@ -184,7 +185,6 @@ We've pre-built some sort functions for you.
184185
To specify a custom sort function, use the following structure for the column object:
185186

186187
~~~javascript
187-
188188
{column: 'Column Name', sortFunction: function(a, b){} }
189189
~~~
190190

@@ -193,7 +193,6 @@ with a column and a `direction` paramenter of either `asc` or `desc`.
193193
If no direction is specified, the default sort will be ascending. Example:
194194

195195
~~~javascript
196-
197196
{column: 'Column Name', direction: 'asc' }
198197
~~~
199198

@@ -221,6 +220,7 @@ sortable={[
221220
]}
222221
defaultSort={{column: 'Age', direction: 'desc'}}/>
223222
~~~
223+
224224
### Filtering
225225

226226
You can do simple case-insensitive filtering by specifying a filterable property on the table. This

0 commit comments

Comments
 (0)
0