Skip to content
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 a language label to code blocks #428

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

nnja
Copy link
Contributor

@nnja nnja commented Aug 10, 2020

Add a language label to each individual code block, move the copy to clipboard button down to accommodate the new header

Before

image

After

image

@McShelby
Copy link

I really like the idea! Nevertheless I am not quite sure if it would be better to have this feature configurable. At least so existing installations could switch back to the old style.

Technically I don't like the fact, that every pre element is affected by the new styling. There may be users that use html preelements inside their markdown for other reasons which would now also be styled. In this case there even might not be a code element nested inside of the pre leading to a visible but empty language lable.

Now that your patch for #427 is applied, the grey color needs alignment.

...and as a matter of taste, the border radius is a bit too large in comparison to other radiuses like the one of the search box.

@McShelby
Copy link

Sadly, this change may not look that good together with the proposed "tab" feature #386.

@nnja
Copy link
Contributor Author

nnja commented Sep 21, 2020

@McShelby I think the two proposed changes address two completely different use cases.

My change is best used when different code snippets are present on the same page individually in multiple languages and formats -- eg. bash scripts, code snippets, HTML -- etc. I'm using this theme for course material and the labels are extremely helpful for beginner developers who may not know when to switch between their terminal and their editor.

The tab view proposed in #386 is far more useful for API documentation -- when the same snippet of code is presented in different languages or output formats.

Personally, I'd implement it like this:

  • Put language labels behind a config param
  • If language labels are on, disable them in a tabbed view, since a label is already present.

Optionally they can be styled to look cohesive if both were used on one page but I'd need help with this as I'm not great with CSS.

If this is something you're interested in I can fix the merge conflict and wrap language labels in a config param that is off by default.

@McShelby
Copy link

I'ld love to work with you on this PR. Sadly I am not a maintainer (yet). So before diving into this, it would be great to hear the opinion of @matalo33 and/or @matcornic about this.

@nnja
Copy link
Contributor Author

nnja commented Oct 4, 2020

Ok, I'll wait to hear from them before proceeding with changes.

maxatome pushed a commit to maxatome/hugo-theme-learn that referenced this pull request Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants