Coder Social home page Coder Social logo

Support for custom CSS about termynal.py HOT 9 OPEN

fresh2dev avatar fresh2dev commented on July 20, 2024
Support for custom CSS

from termynal.py.

Comments (9)

daxartio avatar daxartio commented on July 20, 2024 1

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

from termynal.py.

fresh2dev avatar fresh2dev commented on July 20, 2024 1

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.

image

[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! 🤜🤛

from termynal.py.

daxartio avatar daxartio commented on July 20, 2024

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

from termynal.py.

daxartio avatar daxartio commented on July 20, 2024

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

from termynal.py.

fresh2dev avatar fresh2dev commented on July 20, 2024

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 🤘

from termynal.py.

daxartio avatar daxartio commented on July 20, 2024

You can try to apply this configuration in 0.7.0.a1

markdown_extensions:
  - termynal:
      title: "powershell"
      prompt_literal_start:
        - "$"
        - "PS &gt;"  # 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

from termynal.py.

fresh2dev avatar fresh2dev commented on July 20, 2024

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!

from termynal.py.

fresh2dev avatar fresh2dev commented on July 20, 2024

🤩

from termynal.py.

daxartio avatar daxartio commented on July 20, 2024

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

from termynal.py.

Related Issues (16)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.