-
Notifications
You must be signed in to change notification settings - Fork 921
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add shell
and sql-shell
shortcodes
#1012
base: main
Are you sure you want to change the base?
Conversation
Ooh this looks really nice. I'll take a more detailed look (including the mystery colour scheme!). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great! Unfortunately it's not working for me. This is what I get:
Am I missing something?
Can you please add a new section in the Shortcodes docs explaining how to use this shortcode.
@geriom , Do you have Happy to add some docs on how to use the shortcode and mention the need for prism. However the docsy userguide does not have prism enabled so it will be difficult to demonstrate how is looks when rendered, unless I use screen shots, which is not ideal. |
Co-authored-by: Robert Fekete <[email protected]>
…ocsy into add-shell-shortcodes
…ocsy into add-shell-shortcodes
@geriom Documentation added. I have added the documentation without any examples as docsy docs do not have prism enabled. Also included a big warning about needing prism. |
Co-authored-by: Robert Fekete <[email protected]>
56c0689
to
81db00d
Compare
That was it, thank you. It looks great.
Thanks! I'm taking a closer look to see if I can figure out where is the style for the fenced blocks. |
@at055612 The background color for fenced blocks is set by the highlight theme. Switching to a different theme breaks the color consistency in your shortcode because of the hardcoded value. |
…ocsy into add-shell-shortcodes
By highlight theme I assume you mean [markup]
[markup.highlight]
#style = "tango"
style = "monokai" As I understand it these themes are designed for chroma highlighting only. The theme for Prism is baked in when you download the css/js for your chosen theme, e.g. https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript If I set the hugo/chroma highlight theme to I was never intending for background-color: #f8f8f8 !important; to be left in as I know it is a nasty hack, but did not know how to resolve the background colour difference. I will remove it. If I try to disable chroma by doing [markup]
[markup.highlight]
style = ""
codeFences = false then simple fenced blocks and shell shortcodes now have the same background colour however the simple fenced block now loses the I have just pushed some changes to |
With the latest changes it now looks like this: With chroma prism_syntax_highlighting = false
[markup]
[markup.highlight]
style = "tango" With prism prism_syntax_highlighting = true
[markup]
[markup.highlight]
style = ""
codeFences = false Note the slight difference in bg colour between chroma and prism. |
Also change the card styling to use .highlight or .code-toolbar so it works with prism or chroma
I don't suppose there's any way to integrate this logic into normal fenced blocks, is there? We've got logic now to strip prompts from copied commands in our docs site, so prompt-detection isn't too hard, but continuation is a bit more of a hassle. Still, the tradeoff of once-in-a-while Docsy code maintenance complexity vs the daily pain of writing code blocks like this is something very much worth considering. |
@polarweasel Not sure about the integration with normal fenced code blocks. I think that is Hugo rather than Docsy that handles that and the fact that my shortcode relies on PrismJS (which is no standard in Hugo) complicates things. One of the maintainers may be able to comment on that front. Personally I think it may complicate things for simple fenced blocks and give people prompts then they don't want them. Potentially this shortcode could be changed to strip prompts and add {{ $content := trim (.Inner | default "") "\n " }}
<!-- Prefix all lines with (out) -->
{{ $content = replaceRE "(^|\n)([^\n]+)" "${1}(out)${2}" $content }}
<!-- Remove the (out) prefix and prompt/continuation from any prompt/continuation lines -->
{{ $content = replaceRE "(^|\n)[(]out[)][$>] " "${1}" $content }}
.....
{{- with $content -}}
<code class="language-{{ $language }}">{{- . -}}</code>
{{- end -}} would convert
into
Would likely need additional args to allow setting of the prompt, however if people are using fancy themed prompts (e.g. oh-my-zsh) then the regex would become very nasty. In terms of the ease of using a short code like this, code snippets in your editor are a big help. I use vim with ultisnips (and some custom snippets for the various shortcodes I use) so adding a |
This PR does:
shell
for bash type command line input/output (with line continuation support)sql-shell
for SQL type command line input/output (with line continuation support)The following are examples of using
shell
with a simple fenced block for comparisonWhich looks like this (note the ability to select just the user input for pasting into an actual shell):
And some SQL examples:
Which looks like:
The
(out)
and(con)
prefixes can be changed if people can suggest something better.Note this line in
_code.scss
. This is a bit of a hack as I am not sure where the colour is coming from for the simple fenced blocks.