Guide to change the font size for inline code #377

New issue

Open

opened 2023-11-12 21:36:46 +01:00 by westerdaled · 3 comments

westerdaled commented

2023-11-12 21:36:46 +01:00

(Migrated from github.com)

I want to increase the font size to the value shown in image highlight from the default 1em. However, I don't seem to acheive this when setting similar values in the Enlighter customizer base theme settings. Is there another setting I should adjust ?

I want to increase the font size to the value shown in image highlight from the default `1em`. However, I don't seem to acheive this when setting similar values in the Enlighter customizer base theme settings. Is there another setting I should adjust ? ![image](https://github.com/EnlighterJS/Plugin.WordPress/assets/937208/56872c9a-dbe1-4ca0-952d-7aa4e4f2518c)

AndiDittrich commented

2023-11-13 08:56:42 +01:00

(Migrated from github.com)

to change the font-sizes of different views independently you've to match the views:

.enlighter-v-standard .enlighter span{
  font-size: 1.1rem;
}

.enlighter-v-inline .enlighter span{
  font-size: 1.3rem;
}

to change the font-sizes of different views independently you've to match the views: ```css .enlighter-v-standard .enlighter span{ font-size: 1.1rem; } .enlighter-v-inline .enlighter span{ font-size: 1.3rem; } ```

westerdaled commented

2023-11-13 10:25:23 +01:00

(Migrated from github.com)

Hi Andi

Thanks for you reply. I think you are referring to adding your classes to each inline code block. If I want to make these changes globally, would I need to enter the font size values somewhere in the Enlighter customizer base theme settings. Alternatively, do I simply add your classes to the my theme -> Customising -> Additional CSS. The current styles are listed below:

.codeAgain {
	padding: 12px 12px 12px !important;
}
.enlighter-default {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    max-height: 620px;
    overflow: auto;
}

Hi Andi Thanks for you reply. I think you are referring to adding your classes to each inline code block. If I want to make these changes globally, would I need to enter the font size values somewhere in the Enlighter customizer base theme settings. Alternatively, do I simply add your classes to the my theme -> Customising -> Additional CSS. The current styles are listed below: ``` .codeAgain { padding: 12px 12px 12px !important; } .enlighter-default { padding-top: 15px !important; padding-bottom: 15px !important; max-height: 620px; overflow: auto; } ```

westerdaled commented

2023-11-13 15:38:47 +01:00

(Migrated from github.com)

Ok, I have now added your styles to my theme -> Customising -> Additional CSS. I think that has done the job. I might change the default gray background to Monoka background, but it is getting there.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

EnlighterJS/Plugin.WordPress#377

No description provided.

Rows
Columns