pages/_posts/2015-07-15-code.md
Maruan 71969cce7e
Fix: Improve footnote and citation colors in Distill posts (#3172)
Fixes #3168. (Implemented by [jules.google](https://jules.google).)

This commit resolves issues with footnote and citation styling in
Distill posts, particularly ensuring that pop-up contents and the
numbers themselves respect the site's light/dark theme via shadow DOM
style definitions.

Key changes:

1.  **`d-hover-box` Internal Styling (template.v2.js):**
    The `<style>` tag within the `d-hover-box` component's template
    in `assets/js/distillpub/template.v2.js` has been updated.
    Styles for `.panel` (the main pop-up container) now define:
    - `background-color: var(--global-card-bg-color);`
    - `border: 1px solid var(--global-divider-color);`
    - `color: var(--global-text-color);` (for default text)
    - Links within the panel are styled with
      `color: var(--global-theme-color);` and
      `color: var(--global-hover-color);` on hover.
    This ensures pop-up content is correctly themed from within its
    shadow DOM.

2.  **Footnote/Citation Number Color (template.v2.js):**
    The hardcoded `hsla(206, 90%, 20%, 0.7)` color previously used for
    footnote numbers (in `d-footnote` template) and citation numbers
    (in `d-cite` template) in `assets/js/distillpub/template.v2.js`
    has been replaced with `color: var(--global-theme-color);`.

3.  **Cleaned `_sass/_distill.scss`:**
    Removed the (now redundant) global CSS overrides for `d-hover-box`
    from `_sass/_distill.scss`, as these styles are now correctly
    encapsulated within the `d-hover-box` component itself.

These changes ensure that all aspects of Distill footnotes and
citations (numbers, pop-up background, pop-up text, and links within
pop-ups) are styled using theme-aware CSS variables, providing
correct visual appearance and readability in both light and dark modes.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
2025-05-23 06:42:09 -07:00

101 lines
2.6 KiB
Markdown

---
layout: post
title: a post with code
date: 2015-07-15 15:09:00
description: an example of a blog post with some code
tags: formatting code
categories: sample-posts
featured: true
---
This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting.
It supports more than 100 languages.
This example is in C++.
All you have to do is wrap your code in markdown code tags:
````markdown
```c++
code code code
```
````
```c++
int main(int argc, char const \*argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}
```
For displaying code in a list item, you have to be aware of the indentation, as stated in [this FAQ](https://github.com/planetjekyll/quickrefs/blob/master/FAQ.md#q-how-can-i-get-backtick-fenced-code-blocks-eg--working-inside-lists-with-kramdown). You must indent your code by **(3 \* bullet_indent_level)** spaces. This is because kramdown (the markdown engine used by Jekyll) indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. For example:
````markdown
1. We can put fenced code blocks inside nested bullets, too.
1. Like this:
```c
printf("Hello, World!");
```
2. The key is to indent your fenced block in the same line as the first character of the line.
````
Which displays:
1. We can put fenced code blocks inside nested bullets, too.
1. Like this:
```c
printf("Hello, World!");
```
2. The key is to indent your fenced block in the same line as the first character of the line.
By default, it does not display line numbers. If you want to display line numbers for every code block, you can set `kramdown.syntax_highlighter_opts.block.line_numbers` to true in your `_config.yml` file.
If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:
{% raw %}
{% highlight c++ linenos %} <br/> code code code <br/> {% endhighlight %}
{% endraw %}
The keyword `linenos` triggers display of line numbers.
Produces something like this:
{% highlight c++ linenos %}
int main(int argc, char const \*argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}
{% endhighlight %}