Support for custom CSS

[fresh2dev]

Termynal can be customized quite heavily with CSS alone.

For example, I replace the MacOS-like modal buttons with standard '- ⛶ X' text.

And I replace the title "bash", with plain "shell".

And if the language is "powershell", I set the prefix to 'PS >'.

Similarly, for "python", the prefix is '>>>'.

Rather than baking all this into this tool, if this tool could allow me to point to a custom CSS file, it would simplify the Termynal-related markdown I maintain today.

[daxartio]

Would you like to use your css file instead of Termynal's?

[daxartio]

For example, I replace the MacOS-like modal buttons with standard '- ⛶ X' text.

And I replace the title "bash", with plain "shell".

And if the language is "powershell", I set the prefix to 'PS >'.

Similarly, for "python", the prefix is '>>>'.

I can add settings for this cases and you don't need to use your css

[fresh2dev]

I was thinking support for external CSS files would provide the capability without so much development burden. If you can elegantly bake all that into this tool, that'd be awesome too :metal:

[daxartio]

You can try to apply this configuration in 0.7.0.a1

markdown_extensions:
  - termynal:
      title: "powershell"
      prompt_literal_start:
        - "$"
        - "PS >"  # later it will be "PS >"
        - ">>>"

<!-- termynal -->

PS > pip install termynal ---> 100% Installed

Also in the future i will try to add a configuration like this for each code block.

<!-- termynal :: title:"shell" :: prompt_literal_start:["$", ">>>"] -->

For example, I replace the MacOS-like modal buttons with standard '- ⛶ X' text.

It will be later

[fresh2dev]

That's dope! Yeah, being able to configure each prompt is essential, as a bash-, powershell-, or python-termynal could all exist in the same page.

Thank you!

[daxartio]

I added new feature in v0.9.0.

You can override configs for each block. If you set a part of the settings, another part will be set to the default value.

<!-- termynal: {"prompt_literal_start": ["$", ">>>", "PS >"], title: shell} -->

PS > python

import json

[fresh2dev]

:star_struck:

[daxartio]

Well... I wrote a simple code for this result. What do you think?

<!-- termynal: {"prompt_literal_start": ["$", ">>>", "PS >"], title: powershell, buttons: windows} -->

PS > python

import json

[fresh2dev]

I admire you working to make this just right. That looks very good! I find the default MacOS buttons to be too distracting when the focus should be on the code. The position of those buttons looks good, but for Windows/Linux, I would expect at least a X to close.

You don't have to implement my preferences, of course, but FWIW, here is the minimalist approach I took, and the pertinent CSS.

[data-termynal]:before {
    content: '- ⛶ X';
    color: var(--termynal-color-text-subtle);
    top: 5px;
    right: 7px;
    left: unset;
    width: unset;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

I appreciate your interest and effort in making these enhancements! :fist_right::fist_left: