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.

Sign up for GitHub

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

Jump to bottom

Added optional rendering of code block titles #148

Merged
merged 28 commits into from
Jul 1, 2022
Merged

Added optional rendering of code block titles #148

merged 28 commits into from
Jul 1, 2022

Conversation

geoffreygarrett
Copy link
Contributor

Hi,

I added something I put together for my notes website. It's an optional feature to render code titles for code blocks. The steps to enable them are:

  1. add enableCodeBlockTitle: true to data/config.yaml
  2. add title=<title> attribute to code block as demonstrated here with other attributes available in hugo.

An afterthought: Perhaps a little extra should be added to the documentation for setting the title via highlight shortcode and markdown code fences.

code-title

@geoffreygarrett
feat(code block titles): adds ability to define code block titles for…
715aff9 
… Chroma

If a user provides a title as an argument to a code block, it will be
added as a child `div.code-title` to `div.highlight`, inserted before
`div.chroma`.

- Included default styling (`code-title.scss`) adapted
from `syntax.scss`.
- Added this as a function rendered in the
`partials/head.html` inside the `render()` function, *if*
`enableCodeBlockTitle=true` in the `data/config.yaml`.
@geoffreygarrett
docs(config.yaml): fixed a typo
d982d4d
@geoffreygarrett
docs(config.yaml): set code block linenos to false where unnecessary
32269c9
@geoffreygarrett
style(code title): reduced font size slightly
3e13cb2
@geoffreygarrett
docs(code block titles): set enableCodeBlockTitle to true as default
d0902f3
@geoffreygarrett
fix(code title): corrected accidental omission of code-title.js
7fd830f
@geoffreygarrett
docs(code block titles): added titles for all configuration code blocks
53c3f47
@geoffreygarrett
feat(config example): added enableCodeBlockTitle key
2685fab
@geoffreygarrett
docs(favicon): corrected code block title and added relevant `linenos…
25084b8 
…tart`
@geoffreygarrett
Merge branch 'jackyzha0:hugo' into hugo
7a13df5
@geoffreygarrett
style: removed accidentally included comments
a312e6b
@geoffreygarrett
Merge remote-tracking branch 'origin/hugo' into hugo
f16b31d
@jackyzha0
Copy link
Owner

Woah this looks great! Would love to have this feature. Could you add documentation for using this feature as well? Happy to merge as soon as you do

jackyzha0
jackyzha0 reviewed Jun 28, 2022
View reviewed changes
Copy link
Owner

@jackyzha0 jackyzha0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is great, just a few comments on documentation!

assets/styles/code-title.scss Outdated Show resolved Hide resolved
assets/styles/code-title.scss Show resolved Hide resolved
content/notes/config.md Outdated Show resolved Hide resolved
content/notes/config.md Outdated Show resolved Hide resolved
content/notes/config.md Outdated Show resolved Hide resolved
content/notes/config.md Outdated Show resolved Hide resolved
@geoffreygarrett
Copy link
Contributor Author

geoffreygarrett commented Jun 29, 2022 •
edited

Everything seems to be in order. The only unresolved comment was the use of variables from the custom.scss file @jackyzha0. I looked into using ExecuteAsTemplate as you suggested (#149), and it did yield some results, but there seems to be some some collisions between :root and the dark scope. I think swapping out the style sheets entirely using a script may be the solution there.

@geoffreygarrett geoffreygarrett mentioned this pull request Jun 29, 2022
Closed
@geoffreygarrett
Copy link
Contributor Author

Everything seems to be in order. The only unresolved comment was the use of variables from the custom.scss file @jackyzha0. I looked into using ExecuteAsTemplate as you suggested (#149), and it did yield some results, but there seems to be some some collisions between :root and the dark scope. I think swapping out the style sheets entirely using a script may be the solution there.

ftr, separate syntax styling was added successfully.

@jackyzha0
Copy link
Owner

pushed a few changes to master, do you mind bringing your branch up to date + resolving merge conflicts?

This was referenced Jun 30, 2022
Merged
Closed
jackyzha0
jackyzha0 reviewed Jun 30, 2022
View reviewed changes
Copy link
Owner

@jackyzha0 jackyzha0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small question, rest looks good! excited to merge this soon

assets/js/darkmode.js Outdated Show resolved Hide resolved
@geoffreygarrett
Copy link
Contributor Author

Had a delay there thanks to load shedding and a concern that I might have broken something. I now confirmed that it's not just my branch, but also yours (#154).

This is all ready for you to merge, if everything works well on your side.

@jackyzha0 jackyzha0 merged commit d3e20b8 into jackyzha0:hugo Jul 1, 2022
j0nesma pushed a commit to j0nesma/quartz that referenced this pull request Sep 22, 2023
@geoffreygarrett @j0nesma
Added optional rendering of code block titles (jackyzha0#148)
3bf7622
tomoyanonymous pushed a commit to tomoyanonymous/quartz-research-note that referenced this pull request Oct 20, 2023
@geoffreygarrett
Added optional rendering of code block titles (jackyzha0#148)
c67ffb7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jackyzha0 jackyzha0 jackyzha0 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@geoffreygarrett @jackyzha0