[Sharing] Custom CSS to Style Code Block (Border Radius, Font, Font Size, etc)

[adriancs2]

Hi, guys. For those of you who are interested in CSS customization, here are some CSS modifications that can alter basic styling.

*Note: The following CSS interferes with the styling of code blocks at the highest level, which will override some of the styling of pre-rendered code blocks and might cause individual settings of code blocks to lose their effect. This could result in unintended rendering outcomes.

Custom CSS can be inserted into the [Additional CSS] section of a Wordpress Theme or by using a plugin such as Simple Custom CSS and JS.

/* Border Radius of the code block*/
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre,
.wp-block-kevinbatdorf-code-block-pro code
{
    border-radius: 10px !important;
    /* overflow: hidden !important;  do not apply this, as this will disable the scrollbar */
}

/* top and bottom margin of code block */
.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

/* Use any font resource you prefer, example: import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

/* Change font, font-size, line-height, font-weight */
.wp-block-kevinbatdorf-code-block-pro pre code,
.wp-block-kevinbatdorf-code-block-pro textarea
 {
    font-family: "Roboto Mono", monospace !important;	
    line-height: 135% !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Change the cursor highlight background color */
.wp-block-kevinbatdorf-code-block-pro pre span::selection {
    background-color: #336ecc; /* Cursor highlight background color */
    color: white; /* Cursor highlight text color */
}

/* Maximum height of the block */
.wp-block-kevinbatdorf-code-block-pro pre {
	max-height: 300px;
}

/* ========================== */
/* Code block scrollbar color */
/* ========================== */

/* For Chrome, Edge, Opera, Safari */
.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-track {
    background: #979797;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb {
    background: #7a7a7a;
    border-radius: 10px;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb:hover {
        background: #656565;
    }

    .wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb:active {
        background: #383838;
    }

/* For Firefox */
.wp-block-kevinbatdorf-code-block-pro pre {
    scrollbar-width: thin;
    scrollbar-color: #7a7a7a #979797;
}