Question] The display is normal on the edit screen, but on the article screen it is a single line. The indentation is also wrong. Why? #347
-
|
Nice to meet you and hello. I am not very experienced in this kind of posting, so I apologize if I am using it incorrectly. I am asking this question here because I could not solve the problem by myself. First of all, I am Japanese and cannot speak any English, so I am using DeepL translation. I apologize if there are any strange English words. I have installed Code Block Pro on my WordPress since yesterday. It's great. However, I don't know if it is a compatibility with my theme (Luxeritas) or if there is something wrong with the settings of Code Block Pro, but I can't help but see a single line in the actual post. I have posted an actual sample article below. It is displayed (formatted) correctly in the article edit screen. For some reason, when I actually publish the article or check it in the draft preview, it becomes a single line. I checked the developer tools and thought that perhaps adding some CSS to the code tag in div.wp-block-kevinbatdorf-code-block-pro would solve the problem. Since I am a beginner, I looked on the Internet and found the following I introduced it as a trial and it now breaks lines in the article correctly.(In the attached image, I'm writing to Stylebot, but I'd like to see how it goes a bit more before writing to the WordPress style editor) I thought this was a relief, but there was still a problem: I don't know if it was the introduction of CSS or if there was another cause, but the CSS indentation (Tab) does not seem to display correctly. Specifically, “pointer-events: none !important;” and “color: inherit !important;” in the sample article are correctly indented (2) on the edit screen, but in the actual article, they are attached to the line numbers and not indented. However, the actual article is attached to the line number and is not indented. On the other hand, “&>span” is indented for some reason. Is this due to applying CSS such as word-break or white-space? I looked at the developer tools and it is not indented in the first place, so I have a feeling that it is not a CSS issue, but more likely another cause. Is it my theme, a plugin, Code Block Pro settings...? That's all the questions I have. In summary, my first question is: Is it correct to apply CSS to the code tag as the cause of the single line and how to deal with it? My second question is that when I write wrapping CSS, the indentation is not displayed correctly. Here is what I have tried as a beginner. Sorry for the length of this article.
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Hey, I think this is a optimization problem and something is removing the whitespace. Have you tried to disable all the plugins? That might help narrow it down. Many plugins that do this will have an option to disable some html minification. |
Beta Was this translation helpful? Give feedback.
-
|
Good morning, I'm so glad you enjoyed the article. I am really, really glad you replied. It was a little late at night in Japan, so my reply was delayed. Wow! Thanks for the advice. I had not tried disabling the plugin yet. I apologize for not doing the most basic of basic tasks. I will now try turning them on and off one by one to make sure. I hope to be able to add more in an hour or so. I knew that the problem with the single line and the problem with the indentation not displaying properly could be related problems, not separate. That would be a good study. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your help. It is amazing. I am currently soaring with joy. As you told me, I tried disabling all the plug-ins I am using except “Code Block Pro” because I thought it might be caused by HTML optimization. However, the result did not change. Naturally, I opened the site in a browser with no data when checking to make sure it was not affected by browser cache or cookies. I was wondering if there was some setting in the WordPress theme that I was using. I checked and found it! There it is: !!!! My WordPress theme “Luxeritas” has an option to compress CSS and HTML, and stupidly, the HTML compression ratio was set to “high”... I think I set it to “high” because I was ignorant and thought, “I don't know, but I think it will make the website display faster if I compress it. I really regretted it. I changed it to the “no compression” option with a sense of excitement... I was so excited that I changed it to the “no compression” option, and... it was so easy that I wondered what all the trouble I had gone through! The one-line display was also resolved, and the indentation was displayed as in the article editing screen. I am really happy. If I hadn't been told about this by the experts, I would have thought it was a problem with Code Block Pro or the CSS I was applying, and I would have thought it was misguided. Thank you so much !!!!!! |
Beta Was this translation helpful? Give feedback.
-
|
That's great news and thanks for coming here so I can help. I'm sure your message will help someone with the same theme that experiences the same issue another day :) Take care, and if you have any other issues let me know. |
Beta Was this translation helpful? Give feedback.
Hey, I think this is a optimization problem and something is removing the whitespace. Have you tried to disable all the plugins? That might help narrow it down. Many plugins that do this will have an option to disable some html minification.