tag:support.markedapp.com,2011-09-11:/discussions/questions/8978-asterick-vs-lineMarked: Discussion 2017-06-28T01:10:51Ztag:support.markedapp.com,2011-09-11:Comment/428594592017-06-27T23:52:02Z2017-06-27T23:52:02ZAsterick vs Line<div><p>You can't. Markdown treats -, *, and + the same, interpreting them as<br>
bullets. There's no difference in the rendered output.</p>
<p>You can create checkboxes by using <code>- [ ]</code> and <code>- [x]</code>, though.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/428594592017-06-27T23:54:37Z2017-06-27T23:54:37ZAsterick vs Line<div><p>Hey Brett</p>
<p>Thanks for the input… can I style - [ ] and - [x] with an emoji or something?</p>
<p>Hows the weather in Minnesota right now?</p>
<p>-me</p></div>Michael Ericksontag:support.markedapp.com,2011-09-11:Comment/428594592017-06-28T01:10:17Z2017-06-28T01:10:17ZAsterick vs Line<div><p>So this syntax:</p>
<pre>
<code>+ [ ] checklist item
+ [x] another item</code>
</pre>
<p>Will give you:</p>
<p><img src="http://ckyp.us/RzHFj4+" alt=""></p>
<p>And the HTML looks like:</p>
<pre>
<code><ul class="task-list">
<li class="gh-incomplete task-list-item"><input type="checkbox" class="task-list-item-checkbox"> checklist item</li>
<li class="gh-complete task-list-item"><ins id="firstdiff"></ins><input type="checkbox" class="task-list-item-checkbox" checked=""> another item</li>
</ul></code>
</pre>
<p>So the selector for these would be...</p>
<ul>
<li>unchecked item: <code>ul.task-list li.gh-incomplete input</code></li>
<li>checked item: <code>ul.task-list li.gh-complete input</code></li>
</ul>
<p>Here's an example styling from <a href="http://www.csscheckbox.com/">http://www.csscheckbox.com/</a>:</p>
<p>(You can add this directly to <strong>Preferences->Style->Extra CSS</strong> to apply to all themes. Adding the #wrapper helps increase specificity to override Marked's default styling.)</p>
<pre>
<code>#wrapper .task-list .task-list-item input[type=checkbox] {
overflow: visible;
height: 1px;
width: 1px;
padding: 0;
border: 0;
position: absolute;
margin-left: -2em;
}
#wrapper .task-list .task-list-item input[type=checkbox]:checked:before {
background-position: 0 -15px;
}
#wrapper .task-list .task-list-item input[type=checkbox]:before {
content: ' ';
padding-left: 20px;
height: 15px;
display: inline-block;
line-height: 15px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
background-image: url(http://csscheckbox.com/checkboxes/dark-plus-cyan.png);
position: absolute;
}</code>
</pre>
<p>The above CSS will create:</p>
<p><img src="http://ckyp.us/sqpgaq+" alt=""></p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/428594592017-06-28T01:10:48Z2017-06-28T01:10:48ZAsterick vs Line<div><p>And the weather is finally cool again, a nice sunny and 70° all week :).</p></div>Brett