$ in code block

[Glennmen]

I was looking to add support for the Dracula Theme website in the CodeCopy extension (also owned by @zenorocha) but noticed that a lot of the code blocks start with $, for example: https://draculatheme.com/xcode/

This causes the inconvenience of not being able to quickly copy/paste the command because $ will give an error in the terminal.

I will still add support for the Dracula Theme website soon, if you guys agree that $ doesn't have any added benefit but time is an issue I could make a little time to make a PR for it. It shouldn't take too long to do.

[Glennmen]

Did some looking around and discovered a little trick that is being used on the DigitalOcean community pages. They use <ul> with a custom bullet icon. This way you won't copy $, even not when a user selecting all with his mouse.

More testing is needed but so far I have this: HTML (only 1 <li> is required for single line code block):

<pre>
    <code langs>
        <ul class="prefixed">
            <li class="line" prefix="$">Prefixed</li>
            <li class="line" prefix="$">Apples</li>
            <li class="line" prefix="$">Oranges</li>
        </ul>
    </code>
</pre>

CSS:

pre .prefixed {
    white-space: normal;
    margin: 0;
    font-size: 14px!important;
}

pre .line {
    padding: 0!important;
    list-style-type: none!important;
    white-space: pre;
    margin: 0 0 0 -5px!important;
    line-height: 1.5!important;
}

pre .line::before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    content: attr(prefix);
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    margin-left: 5px;
}

[hacknug]

I personally don't see any benefit on having those $ around so I'd say open a PR with your proposed changes if I wasn't already planning on rebuilding the site from scratch using Gridsome or Gatsby.

Leaving this issue open so I don't forget about it when I start working on it. Thanks for the input!

[Glennmen]

@hacknug Thanks for replying back! I while start on this very soon. I will make a draft PR and go through all the pages one at a time.

[hacknug]

I would probably just remove the $ and leave the rest of the changes for the future once I've had the chance to redo the whole thing. What do you think?

[Glennmen]

Your call, I wouldn't mind doing the required to changes to keep $ but make it not copyable. People are used to having $ if it is a terminal command. I wrote a blog post a couple of months ago how you can do it: https://dev.to/glennmen/code-block--prefix-509i

[hacknug]

The issue is we can't build the site until we get rid of the contributors section on each project due to wedeploy.io not being around anymore.

Also, right now the site is hosted on GitHub Pages + Cloudflare's CDN and I'd like to move it to Netlify mostly because I'm way more familiar with their service and because we'll get previews for PR's automatially (which will help me making sure everything is okay before merging).

Since I'm already planning on moving it, it's missing some of the supported apps/editors, and the contributors section is broken, I feel like maybe rebuilding it from scratch would be better. And if I'm going to do this, I'd hate to waste your time on this.

[Glennmen]

I assume that you will be using the current content for the pages, you won't be writing every install steps from scratch.

As the current steps (with $) doesn't hurt anyone but is only an inconvenience I will suggest the following:

• First you will do the move, which will probably require new CSS or SASS.
• After that you ping me and I will do the changes in a PR based on the new platform

I would like to keep $ because it makes it more clear that it is a terminal command and not some config line.

---

Besides that will you be using an alternative to wedeploy.io? If there is any, I really liked that contributors are shown on each project page.

Also when moving to Netlify will you use still use Cloudflare? In my opinion you should, it saves bandwidth and has the best CDN there currently is.

[hacknug]

I assume that you will be using the current content for the pages, you won't be writing every install steps from scratch.

Correct.

After that you ping me and I will do the changes in a PR based on the new platform

Will do!

I would like to keep $ because it makes it more clear that it is a terminal command and not some config line.

Since they already where there and no one complained about them, I don't see any reason why they should be fully removed. So yeah, let's move them to a pseudo element to make it easier to copy and paste commands.

Besides that will you be using an alternative to wedeploy.io? If there is any, I really liked that contributors are shown on each project page.

Agree it was cool and I'll see what can be done about it. I don't know of any alternatives so it'll probably involve using GitHub's GraphQL API to query the data.

Also when moving to Netlify will you use still use Cloudflare? In my opinion you should, it saves bandwidth and has the best CDN there currently is.

I don't see any reason not to as long as we can solve #59 like you suggested (already asked Zeno for access). I don't like the idea of having two different places to maintain but I wouldn't have to if I didn't add Netlify into the mix which was 100% my idea lol

[Glennmen]

Nice to see that we are on the same page 😉

I remembered a blog post I read on DEV a few weeks ago, this might be the solution for the contributors issue.

blog post website

[hacknug]

This is great!

Just did a quick search and found some alternatives we could use. Leaving the links here just to save some time when I start working on it:

• https://github.com/mgechev/github-contributors-list
• https://github.com/jonschlinkert/github-contributors
• https://allcontributors.org/

[zenorocha]

Hello guys!

All installation instructions have been moved to each repository, e.g. https://github.com/dracula/sublime/blob/master/INSTALL.md

Therefore, you can send a PR to them in order to remove those $ in code blocks.

About the contributors list, this has been finally fixed in the last release ;D

[Glennmen]

@zenorocha Awesome! I did a quick look and it seems that it would be possible to keep the $ in the markdown Install docs but add a custom markdown parser to Marked.js that would render it like how I want it above ;) But I need to do more research about the Marked library and how exactly it works.

[zenorocha]

This has been removed from every repository. Here's one of the commits: https://github.com/dracula/sublime/commit/09faa29057c3c39e9a45f3a51a5e262375e3bf9f

Thanks a lot @Glennmen @hacknug for kicking off this discussion!