Prism for html preview in write tab

Bloke · 2016-03-14 12:32:10

Destry wrote #298228:

it seems Textile development is on it’s last leg.

As Ruud says, what more do you add when it has syntax for just about everything you need in 90% of cases? Aside from making it feel more like other markup languages or tackling the niche features.

The best killer feature, imo, would be to finish off the textplugs branch and/or add some kind of extensible callback system. Because then you could make it feel like any damn system you liked: extend it, alter it, add tags, make your own shortcuts, whatever you fancied.

There’d be no more grounds to claim it didn’t support the HTML 8 <megadoohicky> tag, or that it should use the Redcloth syntax, or use a different shortcut for dl, because you could make a plugin for it.

Destry · 2016-03-14 13:39:54

Bloke wrote #298252:

what more do you add when it has syntax for just about everything you need in 90% of cases?

I think my “last leg” remark got misconstrued. All I meant was that when you look at Markdown — or, as it seems to be headed these days, CommonMark — there’s a big difference between active interest and development there versus Textile.

As developers, you guys can interpret that any way you want to, I guess, but as a user, I’m inclined to favor, for the sake of collaboration (most important in my world), where there’s a more obvious future. But, hey, if you devs can invent megadoohickeys, don’t let me interfere. ;)

candyman · 2016-03-14 13:56:15

Many years ago I preferred TXP over WP because of textile.

Actually I would choose Markdown because all my other Mac utilities and word processors and forums softwares use markdown as default.
Today I have to remind myself to use textile only when I have to write some blog articles or into a thread of this forum.

So, if you create a website for a client that will be managed only by a person (better if a TXP enthusiast) textile is still OK (rather, we all agree it’s better),but if you are going to create a site that will be used by many people (for comments and so on) keep to insist on textile isn’t a good idea.

So it would be great if TXP 4.6 could give us the option to choose our favorite markup language.

Last edited by candyman (2016-03-14 13:56:53)

philwareham · 2016-03-14 14:03:28

candyman wrote #298255:

So it would be great if TXP 4.6 could give us the option to choose our favorite markup language.

Textpattern 4.6 is feature complete now, just some minor bugs to mop up and then it is beta ready. So this will need to be discussed as part of 4.7 or later – hopefully 4.7 will also be put this year though.

In the meantime, Robert has created a Markdown filter if you want it sooner.

Bloke · 2016-03-14 14:03:37

candyman wrote #298255:

it would be great if TXP 4.6 could give us the option to choose our favorite markup language.

You can.

Destry · 2016-03-14 14:29:36

candyman,

Yeah, the filter option is now there. And it’s wonderful!

My notes were about which one serves as the default, and I was proposing that to be Markdown.

For everyone in this community working on personal websites, it’s a trivial (and subjective) issue. But the second you start thinking outside of the box and into the future (collaboration, markup language support in other popular applications, etc), it’s not so trivial (or subjective) anymore. The decision about a default becomes one that is more practical to the majority of user interests.

One thing is for sure. It’s not Textpattern’s role to sell the world on Textile. It seems the only support of it at this point is because a niche CMS forced it on us and made us all junkies. ;)

jakob · 2016-03-15 00:47:51

sacripant wrote #298225:

Meanwhile, it’s a good idea to make your first plugin for txp 4.6 :)

Not quite a plugin, but something to try out. Paste the following into the Additional js code box of the “Write Tab Customize” plugin:

<style>
#main_content .text .microcode-wrapper {
  position: relative;
  height:auto;
  margin-bottom
}
#main_content .text .microcode-wrapper .code-input,
#main_content .text .microcode-wrapper .code-output {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 1rem;
  background: transparent;
  white-space: pre-wrap;
  font-family: Consolas,Menlo,Monaco,monospace;
  font-size: 14px;
  line-height: 1.5em;
  word-wrap: break-word;
}
#main_content .text .microcode-wrapper .code-input {
  opacity: 0.7;
  margin: 0;
  color: #999;
  resize: none;
}
#main_content .text .microcode-wrapper .code-output {
  pointer-events: none;
  border-color: transparent;
  z-index: 3;
  margin: 0;
  overflow-y: auto;
  line-height: 1.5;
}
#main_content .text .microcode-wrapper .code-output code {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 1rem;
  display: block;
  color: #666;
  font-size: 14px;
  font-family: Consolas,Menlo,Monaco,monospace;
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
<script>
;var MicroCode = (function(){
	return {
		init: function(inputSel, outputSel){
			this.focusInput(inputSel);
			this.resizeOutput(outputSel, $(inputSel).outerHeight() );
			this.listenForInput(inputSel, outputSel);
			this.renderOutput(outputSel, $(inputSel)[0].value);
			this.listenerForScroll(inputSel, outputSel);
			this.listenerForResize(inputSel, outputSel);
		},

		listenForInput: function(inputSel, outputSel){
			var self = this;

			$(inputSel).on('input keydown', function(key){
				var input = this,
					selStartPos = input.selectionStart,
					inputVal = input.value;

				if(key.keyCode === 9){
					input.value = inputVal.substring(0, selStartPos) + "    " + inputVal.substring(selStartPos, input.value.length);
					input.selectionStart = selStartPos + 4;
					input.selectionEnd = selStartPos + 4;
					key.preventDefault();
				}

				self.renderOutput(outputSel, this.value);
			});

			Prism.highlightAll();
		},

		listenerForScroll: function(inputSel, outputSel){
			$(inputSel).on('scroll', function(){
				console.log(this.scrollTop);
				$(outputSel)[0].scrollTop = this.scrollTop;
			});
		},

		listenerForResize: function(inputSel, outputSel){
		  var self = this;
			$(inputSel).on('autosize:resized', function() {
				self.resizeOutput(outputSel, $(inputSel).outerHeight() );
			});
		},

		resizeOutput: function(outputSel, value){
		  $(outputSel).add($(outputSel).parent()).height(value);
		},

		renderOutput: function(outputSel, value){
			$('code', outputSel)
				.html(value
				.replace(/&/g, "&amp;")
				.replace(/</g, "&lt;")
				.replace(/>/g, "&gt;") + "\n");

			Prism.highlightAll();
		},

		focusInput: function(inputSel){
			var input = $(inputSel);

			input.focus();

			input[0].selectionStart = input[0].value.length;
			input[0].selectionEnd = input[0].value.length;
		}
	}
})();

$(function() {
  var MicroCodeSyntax = 'textile';
  var $Textareas = $('#body').add('#excerpt');

  // add wrapper and input class
  $Textareas.addClass('code-input').wrap('<div class="microcode-wrapper"></div>');

  // add styled code output container
  $('<pre class="body-output code-output language-' + MicroCodeSyntax + '"><code class="language-' + MicroCodeSyntax + '"></code></pre>').insertAfter('#body');
  $('<pre class="excerpt-output code-output language-' + MicroCodeSyntax + '"><code class="language-' + MicroCodeSyntax + '"></code></pre>').insertAfter('#excerpt');

  // initiate MicroCode syntax highlighting
  MicroCode.init('#body', '.body-output');
  MicroCode.init('#excerpt', '.excerpt-output');

});
</script>

And you should have live textile highlighted textareas for the body and excerpt fields (v4.6 only) using the bundled prism syntax highlighter. By changing the var MicroCodeSyntax = 'textile'; to markdown it should also do markdown syntax highlighting.

There are advantages …

You edit directly in the textarea, not in an editor that has to pass the code back to the textarea, so saving works fine.
It’s comparatively lean and responds to changing textarea widths and heights (as far as I’ve tested).

… and disadvantages to this method …

It works by fading back the textarea text and overlaying a div directly over the textarea with the syntax highlighting. Hence the font, font-size, padding, line-spacing and widths of the overlay and the textarea must therefore be styled identically. You type as it were through the overlay into the textarea. Occasionally you’ll see that they don’t tally, e.g. when text is italicised, or when for some reason wrapping goes awry.
Not sure how well it works in old browsers.

The biggest disadvantage is that prism textile highlighter doesn’t seem to properly highlight certain situations, that do, however, crop up fairly often, for example:

hyphens and underscores in file names or in date sequences, e.g. 21-23 May / 13-14 June register as strikethrough or italic. Both occur frequently in links or file_download links.
Highlighting in an ordered or unordered list doesn’t appear to work at all
And probably more.

If this is due to some setting in prismjs I’m not aware of, do let me know.

Problem solutions and problems with those solutions:

Reducing the opacity of the textarea further helps reduce the overlap effect, but the blinking cursor fades with it. Are there ways around that.
If someone more knowledgeable were able to make the prism textile syntax parser more robust, it could be quite usable.

Note: if you make own changes to the code, make sure the &, < and > in the RenderOutput function haven’t been encoded by bot_wtc.

BTW: All code optimisations welcome.

jakob · 2016-03-15 20:54:00

This is a screenshot using the standard css that comes with prism:

It also shows the problems:

Syntax highlighting works fine in a paragraph, but not in the same text in the bullet points beneath it. Why?
Hyphens in the link address are not ignored and show the del styling
Underscores in the link address are not ignored and show as italic
If you look carefully, you can see the faded straight text beneath the italicised text.

jakob · 2016-03-15 21:19:46

And this is a screenshot of the same but using markdown syntax:

Some things work better in markdown, like the syntax highlighting in bullet points but underscores in.

Textpattern CMS

Textpattern CMS support forum

#25 2016-03-14 12:32:10

Re: Prism for html preview in write tab

Destry wrote #298228:

#26 2016-03-14 13:39:54

Re: Prism for html preview in write tab

Bloke wrote #298252:

#27 2016-03-14 13:56:15

Re: Prism for html preview in write tab

#28 2016-03-14 14:03:28

Re: Prism for html preview in write tab

candyman wrote #298255:

#29 2016-03-14 14:03:37

Re: Prism for html preview in write tab

candyman wrote #298255:

#30 2016-03-14 14:29:36

Re: Prism for html preview in write tab

#31 2016-03-15 00:47:51

Re: Prism for html preview in write tab

sacripant wrote #298225:

#32 2016-03-15 20:54:00

Re: Prism for html preview in write tab

#33 2016-03-15 21:19:46

Re: Prism for html preview in write tab

Board footer