Formatting Code Whilst Using "Insert Code"

[updown]

Formatting Code Whilst Using "Insert Code"

FOR STARTERS:View this posting on the forums: "support.proboards.com/thread/616433/bbcode-insert-operable-mozilla-firefox"

MY GOAL: all anyone to view a posting's "Insert Code", (regardless of their browser being used) as one, broken code.

IT'S ALL ABOUT: a clean output of line-breaking, whilst using "Insert Code"

OR: is formatting "Insert Code", within itself, just not an option, when it comes to bbc code?

AN EXAMPLE: what if one wanted to somehow get around all of this line-breaking nonsense via, somehow, using "Insert Code" within "Insert Code".  Would that ensure "that the long line of unbroken characters" that the coder "posted eventually gets broken in the middle of a word if necessary"?

[Chris]

The topic you linked pretty much boiled it down to a CSS rule that set the white-space to pre-wrap for the in post code box. The mention of browsers was only considered during the troubleshooting process and had no bearing on the final conclusion.
The presence of the rule in my opinion should be permanent (like the reset css) and available across all themes but unfortunately it is not and this can be demonstrated by simply switching to certain themes on this very support forum and viewing some extra long line of code within a post.

pre refers to the HTML PRE tag which is meant to accept and display preformatted text unaltered, so certain whitespace characters such as tabs for indents or sequential spaces which are normally ignored in HTML can be represented. The CSS rule basically applies that behaviour to any HTML element and on Proboards it is used to lend that behaviour to the bbc code tag.

Example:

Pay attention to the long line that starts $('textarea[name="message"]', this).replaceSelection(... and how it wraps or doesn't wrap

Code with white-space:pre applied inline

var livedraw = this;
$(window).on('load', function () {
if (window.eton && eton.wysiwyg) {
livedraw.create_canvas();
livedraw.bind_events();
eton.wysiwyg.addButton(
'livedraw',
livedraw.images.live_drawing, {
insert : function () {
livedraw.show_drawing_window();
//don't insert a tag into typing area
return false;
},
title : 'Draw A Picture'
})
$('.form_post_quick_reply').on('submit', function (ev) {
if (!livedraw.has_drawn)
return;
$('textarea[name="message"]', this).replaceSelection("[div href=\"https://github.com/PopThosePringles/ProBoards-Live-Drawing\" title=\"" + livedraw.canvas.get(0).toDataURL() + "\"][/div]")
})
}
})

Code with white-space:pre-wrap applied inline

var livedraw = this;
$(window).on('load', function () {
if (window.eton && eton.wysiwyg) {
livedraw.create_canvas();
livedraw.bind_events();
eton.wysiwyg.addButton(
'livedraw',
livedraw.images.live_drawing, {
insert : function () {
livedraw.show_drawing_window();
//don't insert a tag into typing area
return false;
},
title : 'Draw A Picture'
})
$('.form_post_quick_reply').on('submit', function (ev) {
if (!livedraw.has_drawn)
return;
$('textarea[name="message"]', this).replaceSelection("[div href=\"https://github.com/PopThosePringles/ProBoards-Live-Drawing\" title=\"" + livedraw.canvas.get(0).toDataURL() + "\"][/div]")
})
}
})

Code with white-space:normal applied inline

var livedraw = this;
$(window).on('load', function () {
if (window.eton && eton.wysiwyg) {
livedraw.create_canvas();
livedraw.bind_events();
eton.wysiwyg.addButton(
'livedraw',
livedraw.images.live_drawing, {
insert : function () {
livedraw.show_drawing_window();
//don't insert a tag into typing area
return false;
},
title : 'Draw A Picture'
})
$('.form_post_quick_reply').on('submit', function (ev) {
if (!livedraw.has_drawn)
return;
$('textarea[name="message"]', this).replaceSelection("[div href=\"https://github.com/PopThosePringles/ProBoards-Live-Drawing\" title=\"" + livedraw.canvas.get(0).toDataURL() + "\"][/div]")
})
}
})

In the first example with white-space:pre that long line will tend to keep going off to the right while in the second example the line will wrap as many times as needed to keep it within the confines of the code box. Basically that is what was being discussed in the topic you linked. A CSS rule added to the theme's style sheet if the rule is missing would fix it for everybody but it can also be done inline as the examples above.

[updown]

A simple, reworded example:

Making part of that code BLUE-in-color

That would make emphasizing code a simple task, particularly to point-out a piece of it.

Can that be done?

Or is instructing someone to search for something located directly within the code the only way to about this? Like typing, "Search for the '/' within this example code shown below:"?

Painstakingly, though it may be, reiterating items in this mannor may need to be performed for each, individual code point-out/emphasis made!

[Chris]

Sept 7, 2017 19:39:08 GMT -8 updown said:

A simple, reworded example:

Making part of that code BLUE-in-color

That would make emphasizing code a simple task, particularly to point-out a piece of it.

Can that be done?

Or is instructing someone to search for something located directly within the code the only way to about this? Like typing, "Search for the '/' within this example code shown below:"?

Painstakingly, though it may be, reiterating items in this mannor may need to be performed for each, individual code point-out/emphasis made!

[code] tags are meant to make other tags inert so if you wish to highlight part of a code you won't be able to use formatting tags such as [b], [u], [font color="red], etc. you would instead need to use the aforementioned [pre][/pre] tag which will then allow the inclusion of additional formatting bbcodes:

var livedraw = this;
$(window).on('load', function () {
	if (window.eton && eton.wysiwyg) {
		livedraw.create_canvas();
		livedraw.bind_events();
		eton.wysiwyg.addButton(
			'livedraw',
			livedraw.images.live_drawing, {
			insert : function () {
				livedraw.show_drawing_window();
				//don't insert a tag into typing area
				return false;
			},
			title : 'Draw A Picture'
		})
		$('.form_post_quick_reply').on('submit', function (ev) {
			if (!livedraw.has_drawn)
				return;
			$('textarea[name="message"]', this).replaceSelection("[div href=\"https://github.com/PopThosePringles/ProBoards-Live-Drawing\" title=\"" + livedraw.canvas.get(0).toDataURL() + "\"][/div]")
		})
	}
})

You would of course need to take steps to prevent the parsing of bbcode that may then appear in the code if the intent was for it to appear as literal text and not be parsed via the use of [noparse] or [noubbc] tags strategically placed to disable anything not meant to be parsed which is why this method is not mentioned much.

If you are instead looking for fully automated syntax highlighting then you may want to read this thread instead.