Home → Questions →

Asterick vs Line

• Edit

Mike Erickson

27 Jun, 2017 11:48 PM

Hey There

I am creating a custom theme for Marked 2 and I am trying to provide different characters for lists (see screenshot from Bear)

I want to style these as checkboxes
- My list
   - item 1
   - item 2

I want to replace the asterisk with a custom character (in my case, a simple bullet)
* Parent
  * child
  * child

 Can someone help me find the specific class where I can apply this?

• bear.png 19.4 KB

1. Support Staff 1 Posted by Brett on 27 Jun, 2017 11:52 PM

   

   You can't. Markdown treats -, *, and + the same, interpreting them as
   bullets. There's no difference in the rendered output.

   You can create checkboxes by using `- [ ]` and `- [x]`, though.

   -Brett

   • Edit

2. 2 Posted by Michael Erickso... on 27 Jun, 2017 11:54 PM

   

   Hey Brett

   Thanks for the input… can I style - [ ] and - [x] with an emoji or something?

   Hows the weather in Minnesota right now?

   -me

   • Edit

3. Support Staff 3 Posted by Brett on 28 Jun, 2017 01:10 AM

   

   So this syntax:

   + [ ] checklist item
   + [x] another item
   

   Will give you:

   

   And the HTML looks like:

   <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>
   

   So the selector for these would be...

   • unchecked item: ul.task-list li.gh-incomplete input
   • checked item: ul.task-list li.gh-complete input

   Here's an example styling from http://www.csscheckbox.com/:

   (You can add this directly to Preferences->Style->Extra CSS to apply to all themes. Adding the #wrapper helps increase specificity to override Marked's default styling.)

   #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;
   }
   

   The above CSS will create:

   

   • Edit

4. Support Staff 4 Posted by Brett on 28 Jun, 2017 01:10 AM

   

   And the weather is finally cool again, a nice sunny and 70° all week :).

   • Edit