Asterick vs Line

Mike Erickson's Avatar

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?

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

    Brett's Avatar

    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.


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

    Michael Erickson's Avatar

    Hey Brett

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

    Hows the weather in Minnesota right now?


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

    Brett's Avatar

    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>

    So the selector for these would be...

    • unchecked item: ul.task-list input
    • checked item: ul.task-list input

    Here's an example styling from

    (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(;
        position: absolute;

    The above CSS will create:

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

    Brett's Avatar

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

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Already uploaded files

  • bear.png 19.4 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac