Support » Plugin: Code Syntax Block » Why does the first line of code indent if the code has syntax highlighting?

  • Resolved fredomack

    (@fredomack)


    I am using the Code Syntax Block plugin for WordPress. I am using a WordPress version and PHP version that meets the minimum required verion for the Code Syntax Block plugin.

    Whenever I use it the first line of code (be it Bash or whatever) has two leading spaces. When I am editing it, there is no sign of a space. How do I eliminate this double space?

    For example, I want the code to appear like this:

    #!/bin/bash
    echo "test"
    echo "line 3"

    But it appears like this:

      #!/bin/bash
    echo "test"
    echo "line 3"
Viewing 8 replies - 1 through 8 (of 8 total)
  • @fredomack, I think the spacing might be due to a conflict with a theme CSS adding a margin, or padding to one of the elements.

    If you can share with me the theme you are using, or even better an example link which shows this result I can help troubleshoot.

    My website is not yet published. It is a child theme of the Twenty Nineteen WordPress theme. Does this help you?

    If I create a blank line, you see it in the syntax highlighting, but the first real line with code has no indent. When I go to edit the theme I see an alert on ” padding: 0 15px;”. I would prefer not make any changes except those that could fix this problem.

    I tried duplicating by adding the same block you have above using the Twenty Nineteen theme and I don’t see the same result. Do you have a customized color scheme from Prism, or the default one shipped with the plugin?

    The padding: 0 15px; error sounds like it might be related, but I’m not quite sure where you are seeing that in editing. Without seeing the site live, it will be difficult to troubleshoot.

    If you can narrow down the conflicting rule, you can target an override for just this block using the CSS class pre.wp-block-code and it won’t effect anything else.

    I have no plugin installed with “Prism” in its name. How would I know if I was using a customized color scheme for Prism?

    I tried using the pre.wp-block-code class in the HTML. There was already a ‘pre class=”wp-block-verse”‘ tag. The pre.wp-block-code class did not seem to do anything. Maybe I don’t know how to properly implement this.

    If I could attach a picture or send you a picture, you could see that in the “Preview” view of the block of text in WordPress’ editor GUI, everything is fine. But when I see the whole page as a preview (that looks just like the website when it will be published), the first line is indented by about one space. I could send you file that shows the three different ways of viewing it (the raw HTML code, preview where it looks fine, and the real, full-page preview where there is a problem).

    This page does not say that Prism is needed.

    If it is needed, I see these options.

    APH Prism Syntax Highlighter
    Prism Syntax Highlighter
    Prism Highlight
    Prism Syntax Highlighter for WordPress
    wp-prism
    WP Prism Syntax Highlighter
    Easy Prism Syntax Highlighter
    Prism WP

    If I need to install a Prism plugin, please tell me what to do.

    You do not need to install any additional plugins. There are options in this plugin to override the default colors using your own scheme or one you download from Prism. I was asking to see if you had any new CSS that might be conflicting.

    The HTML tag I was referring to was with regards to what CSS class to target to override the padding. What would help is if I knew the theme you are using, or just the CSS file from the child theme could help.

    It has never worked for me, so I am not sure why a new CSS would cause the problem. I thought the theme was the Twenty Nineteen WordPress theme.

    I found “Additional CSS” associated with the theme. Here it is:

    .nav-links {
    margin-left: 0 !important;
    margin-bottom: 40px;
    }
    input.es_required_field.es_txt_email {
    border: 1px #ccc solid;
    background: none;
    border-radius: 2px;
    padding: 7px 5px !important;
    line-height: 1;
    width: 100%;
    max-width: 370px;
    margin-top: 10px;
    }.widget input.es_subscription_form_submit {
    margin-top: 10px;
    }

    .es-field-wrap label {
    font-size: 14px;
    line-height: 1;
    display: flex;
    flex-direction: column;
    }

    .es-field-wrap br {
    display: none;
    }

    input.es_subscription_form_submit {
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 0;
    font: 500 18px ‘Open Sans’, sans-serif;
    height: auto;
    letter-spacing: 1px;
    background: #000;
    line-height: 1;
    font-size: 14px;
    }

    .es-field-wrap {
    margin-bottom: 0;
    }
    .nav-links > a {}

    .page-numbers {
    display: flex;
    align-items: center;
    }
    @media all and (max-width: 767px) {
    .has-sidebar .article_container, .has-sidebar section.no-results {
    padding-right: 0;
    }

    aside.widget-area {
    padding: 0 20px;
    }

    input.es_required_field.es_txt_email {
    width: 100%;
    }
    }

    Lines #6 and 9 have odd values for px in them; both of these lines have exclamation points in them when I use the WordPress web UI to examine the raw CSS code. Please let me know what I need to provide you to help me.

    Another user came across this same issue with a live example that I was able to troubleshoot and fix the issue.

    See Github PR: https://github.com/mkaz/code-syntax-block/issues/54

    I released version 1.0.1 with the update that should resolve the indentation for you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.