search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.32k stars 1.3k forks source link

Language Bar styling similar to Stripe? #2204

Closed TylerYep closed 4 years ago

TylerYep commented 4 years ago

Motivation I saw a few examples of websites that use Prism such as Stripe or BetterStack

Both have a language bar and some very beautiful styling. I was wondering if this was already a Prism theme/other, and if not, will it be added?

Description The language bar allows clear readability of the language and has much more space to add download, copy, or other commands. If not already present, I think it would be a great theme or functionality addition.

Alternatives N/a

mAAdhaTTah commented 4 years ago

This looks like a custom design. We have a show-language plugin that looks different from that one but serves a similar purpose. It may be doable with custom CSS, if you want to produce their result, but I haven't looked into it.

RunDevelopment commented 4 years ago

Yes, it's definitely possible. The Toolbar plugin (used by Show language) creates the following structure to add a toolbar:

<div class="code-toolbar"> <!-- toolbar wrapper -->
    <pre><code>...</code></pre> <!-- code block -->
    <div class="toolbar"> <!-- actual toolbar -->
        <div class="toolbar-item">...</div> <!-- button 1 -->
        <div class="toolbar-item">...</div> <!-- button 2 -->
    </div>
</div>

So you "just" have to move the .toolbar at the top and make it a block. Maybe some extras styles for the buttons, so everything looks nice and that should do it. Not trivial but definitely doable.

TylerYep commented 4 years ago

Sounds good, thank you!