Code Block App / Syntax Highlighting. Bugs, workaround & feedback.

[DavidLean]

The purpose of this post is to list the bugs in the Code Block app so that a developer might fix them. And to detail workarounds I've found. 

For me, posting code snippits with syntax highlighting is a critical requirement. Meaning, without it Weebly is not suitable for us.

There is only one app add-in that provides this capability in Weebly. Unfortunately it is is unstable & not well tested.

1. When editing in Themes with vertical "left side" menus, ie: Brisk v2.0, the "Display Header" textbox, goes vertical & completely covers the "code display" area. Thus it must be set to "off" or it is impossible to edit the code you want to show.

The "Display Header" covers the code area.

• Workaround: As this is likely an CSS tag bug. Might be able to rewrite your theme to use non-standard CSS tag for Navigation. (This is likely a bad idea). Or pray Weebly provides a bug fix soon-ish.

2. Attempting to displaying HTML code, breaks the page.

• The HTML display code seems to be incorrectly treated as part of the rendered page structure.
• In Editor mode the add-in hangs on "Loading". The "Code Block" displaying the HTML must be deleted to re-edit the page.
• When published, it can break your page as your display HTML becomes part of the page definition, causing syntax errors.
  Workaround: Use an alternative. ie: A bitmap image or an HTML <Pre> tag, 

3. In the Editor, the code in the Code Block is not visible on the "Blogs" Summary page, which is annoying.

• It does show correctly when you edit the full blog post.
• It displays correctly on both the Summary Blog Page and the Full Post when published.

Workaround: Avoid putting code above the "Read More" break. This will also improve the render speed of your Blog page.  

It would be nice to be able to :-

• Customise the "Settings" default values. ie: I rarely post JavaScript.
• Toggle the "Display Header" position to the bottom, like a caption.
• Set the Font properties of the display header.
• Control the padding above / below, so that the code could be part of the text surrounding it.
• Choose the font of the Code Display. ie: Font size & a range of fixed fonts: Consolas, Times New Roman, Courier New etc.
• Control the border properties. At least Show/Hide Border & maybe line color, thickness. Similar to the settings of the "Content Color Box" addin.

If you can avoid the above issues, this app meets the minimum features you'd require & works fine.

[Adam7]

Thanks for sharing your work-arounds, @DavidLean. Hopefully most people don't run into these particular issues, although I could see people hitting #2 and #3 more frequently.