No line breaks

Hi there,

Can you send me a link to see the issue in action?

Thanks!

Hi,

The missing line breaks I am also seeing when simply pasting Ardiuno code and using language=”clike”. Example

[dm_code_snippet background=”no” wrapped=”yes” language=”clike” slim=”yes” copy-confirmed=”Copied. Once pasted into IDE, run CTL T to Auto Format”]

An example output can be seem at https://ditronix.net/wiki/emis-1_test_code_oled/

Had to put a . in the opening comment to break the lines which is untidy.

ALSO, noted that if you place a comment after a statement etc, the comment displays on the following line (although a ‘code copy’ is OK).. Example:

#define LED_Red 2 // Red LED

shows up as

#define LED_Red 2
// Red LED

Many thanks and keep up the good work!

Pb is the same, with or without comment in the Python code.

It si also the same without pasting code from another editor.

Using Ctrl + T to Auto Format, change entered code !!??

@ditronix Thanks for providing some extra details.
Can you paste the shortcode fully here for me?
The link you referenced is not working anymore.

@agima I’ll check this and see if there is a way to solve it now or if a plugin update is required.
If you can paste a shortcode example for me it will be perfect.

Thanks for the feedback!

• I add a Code Snippet DM block in a page
• I then add the following example of Python code:

for i in range(1, 10):
    print(i)

Screen capture in WP editor

• I check the option to have the line numbers
• I select “Python” as language
• I update the page and ask for a preview in a new tab

Screen capture in page preview

Below the shortcode of the block in the page:

<!-- wp:dm-code-snippet/code-snippet-block-dm {"content":"for i in range(1,10): \n    print(i)","lineNumbers":true,"language":"python"} -->
<div class="dm-code-snippet dark dm-normal-version default no-background-mobile" snippet-height="" style="background-color:#abb8c3"><div class="control-language"><div class="dm-buttons"><div class="dm-buttons-left"><div class="dm-button-snippet red-button"></div><div class="dm-button-snippet orange-button"></div><div class="dm-button-snippet green-button"></div></div><div class="dm-buttons-right"><a id="dm-copy-raw-code"><span class="dm-copy-text">Copy Code</span><span class="dm-copy-confirmed" style="display:none">Copied</span><span class="dm-error-message" style="display:none">Use a different Browser</span></a></div></div><pre class=" line-numbers"><code id="dm-code-raw" class=" no-wrap language-python">for i in range(1,10): 
    print(i)</code></pre></div></div>
<!-- /wp:dm-code-snippet/code-snippet-block-dm -->

@agima @ditronix
I assume you guys didn’t add the code via the TinyMCE editor or the Gutenberg block, you added it directly with the shortcode.

If you add it directly with the short code, you need to wrap the code in a <pre></pre> tag. See the example in the documentation.

For example this piece of code:

[dm_code_snippet background="no" background-mobile="yes" slim="no" line-numbers="yes" bg-color="#abb8c3" theme="dark" language="python" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]<pre>
# function to rotate array by d elements using temp array
def rotateArray(arr, n, d):
    temp = []
    i = 0
    while (i < d):
        temp.append(arr[i])
        i = i + 1
    i = 0
    while (d < n):
        arr[i] = arr[d]
        i = i + 1
        d = d + 1
    arr[:] = arr[: i] + temp
    return arr
 
 
# Driver function to test above function
arr = [1, 2, 3, 4, 5, 6, 7]
print("Array after left rotation is: ", end=' ')
print(rotateArray(arr, len(arr), 2))

#define LED_Red 2 // Red LED
# this code is contributed by Anabhra Tyagi</pre>
[/dm_code_snippet]

Displays properly here https://apps.devmaverick.com/code-snippet/2022/09/04/python-code-with-comments-and-spacing-via-shortcode/

Let me know if this solved your issue.

• This reply was modified 2 years, 2 months ago by George-Paul Cre?u.

@agima Here is that code added with Gutenberg block and it worked on theme twenty twenty-two.
https://apps.devmaverick.com/code-snippet/2022/09/04/python-added-via-gutenberg-block-with-line-number/

Is your theme maybe doing some CSS stuff that is messing with the <pre> or <code>?

I don’t know which editor I’m using (I think this is Gutenberg but I’m not sure), but it is sure that I do not enter the shortcode manually. I selected it from a list with all blocks in my WP environment.

I think it’s more of a CSS conflict issue with my OceanWP theme that I mentioned in my first post.

Is it possible to add the CSS of the plugin in the Additional CSS class(es) section of the block?

I will not change my theme for a plugin, it is too much of work.

@necroob
<pre> is here if you are looking in the block code

<!-- wp:dm-code-snippet/code-snippet-block-dm {"content":"for i in range(1,10): \n    print(i)","lineNumbers":true,"language":"python"} -->
<div class="dm-code-snippet dark dm-normal-version default no-background-mobile" snippet-height="" style="background-color:#abb8c3"><div class="control-language"><div class="dm-buttons"><div class="dm-buttons-left"><div class="dm-button-snippet red-button"></div><div class="dm-button-snippet orange-button"></div><div class="dm-button-snippet green-button"></div></div><div class="dm-buttons-right"><a id="dm-copy-raw-code"><span class="dm-copy-text">Copy Code</span><span class="dm-copy-confirmed" style="display:none">Copied</span><span class="dm-error-message" style="display:none">Use a different Browser</span></a></div></div><pre class=" line-numbers"><code id="dm-code-raw" class=" no-wrap language-python">for i in range(1,10): 
    print(i)</code></pre></div></div>
<!-- /wp:dm-code-snippet/code-snippet-block-dm -->

@agima Ok. I’ve tested the code from above and it works, so most likely there is a CSS in the theme that is messing with the code snippet.
You can either:
1. Post that snippet on a page and provide the link so I can actually debug on your theme. I need a working link to your site with a snippet on it.

OR

2. Email me at [email protected] if you don’t want to make that link public here and we can discuss it over the email.

Best regards,
George

@necroob
I modified an existing article in order to use your plugin for code examples.

You will see that the two blocks with the python code are a problem (no line breaks and no syntax coloring)

https://coursemetry.com/get-stock-exchange-quotations-with-python/

Let me know if you want me to make some changes in order to solve the problem.

Thanks

Regards,

Laurent

@agima

See this video with details:
https://1drv.ms/u/s!At5qlWTQRg7GxKMljpTl-hIehy1OfQ?e=sfnMlh (Download it, it might not play directly in browser)

I think the issue is with the code you copied and pasted in the Code Snippet DM block.
The theme seems fine.

Let me know if the video helped you.

Best regards,
George

• This reply was modified 2 years, 2 months ago by George-Paul Cre?u.

@necroob
I saw your screen recording, and I saw that it works in your environment with the OceanWP theme.

The problem is always the same for me, whether I copy/paste from Google Colab, or copy/paste from Visual Studio Code, or manually type the python code into the snippet.

So, I think it’s another plugin on my WordPress that is messing up the display since it works on your test environment with my theme.

I’ll investigate to try to find out, as you already spent a lot of time trying to solve my problem which is not from your plugin.

A big thank you to you for your investment and your reactivity to try to find a solution.`

Have a nice day

@agima
Don’t hesitate to send me an email at [email protected] if you find out what plugin is causing this issue.

I’ll mark this as complete.

Best regards,
George