Unicode fix is now in.

I’m interested to hear a little more detail?

Because we are using an HTML5 DOCTYPE, we could add

<meta charset="UTF-8">

*immediately *after the opening tag, but it isn’t strictly required link here. But I assume you’ve come across more specific issues?

Unicode could not be written to the file for one. That just required some encoding to pass it to the file write command. But then the unicode characters didn’t show up right.

So really what needed to happen was the text needed to be converted to ASCII, but also escaped for HTML to something like &#XXXX;.

So now I just pass the text to a function:

escape.png932×229 7.4 KB

@facelessuser: I came across encode() the other day and was considering ‘xmlcharrefreplace’, although I wasn’t sure how it fitted in to the project. The Python docs don’t indicate that encode() takes varargs - must be out of date.

BTW, and out of interest, I conquered adding comments last night (in my head ). Here’s my outline, but I’m not sure if it’s worth doing. Nevertheless, it’s interesting :

1. Create a shortcut to store the current view, point, word under the point - and a comment read from the input panel - in a dictionary of tuples, using the view as key. If there isn’t a proper a-z word under the point, then bail, and it cannot be a selection (just a single point).

Allowing a selection is too messy, as it would cover a number of spans. Similarly, extending the comment across the current span could be messy, particularly if within a comment line. (Why would someone put a comment in a comment, Doh!)

2. Add CSS rule(s) to a tag such as ‘b’ or ‘tt’, or possibly a little bit of JS, based on a class that would create the tooltip on hover. (JS might use ids instead: e.g. ‘comment’ + pt)
   2b. Format the tag so it stands out. Can’t really use a colour, so perhaps underline or italic. (But perhaps allow yet another setting for ‘comment_colour’.)
   2c. Might need another styled-span, that JS would use to display the tooltip.
3. During parsing of the lines/spans - but after entity escaping the HTML - examine the comment-points to see if any fall within the current region/span.
4. If so, compare the word-under-point. If it’s not the same, then bail - they’ve added more code and the comment is no longer relevant.
5. Find the same word in tidied_text, and replace it with '<b class=“comment” title=“The comment text”>word".
6. If using JS for the tooltip, would need to insert the (new) styled-span just inside this b-tag, containing the comment text. (It could be positioned to display underneath the line.)

I recall/believe that tooltips can be created with just CSS, particularly CSS3. They could even just be links, but a little JS might be better.

Anyway, I haven’t decided how far I might pursue this. Although, it’s still kinda cool

I shall have a look at your current work in a while. Regards, Andy.

@facelessuser

He, he, I was looking at this yesterday, and wondered why ST didn’t offer the second, default, argument. But it does - must have been in my blind-spot when I glanced at the docs.

Curious as to why you created theme files, rather than just creating a dictionary? Perhaps you feel users would be more comfortable modifying the plist.

My **idiom **(notice the Python reference there?) would be to delete all the ’ self.bground = ‘’ ’ as they are now *always *assigned a value, but we had a similar discussion before

Are ‘activeGuide’, etc., standard pList items in ST? Or have you made them up for the plug-in? (I’ve struggled to find a list of the possible items.)

Andy.

[quote=“agibsonsw”]@facelessuser

He, he, I was looking at this yesterday, and wondered why ST didn’t offer the second, default, argument. But it does - must have been in my blind-spot when I glanced at the docs.

Curious as to why you created theme files, rather than just creating a dictionary? Perhaps you feel users would be more comfortable modifying the plist.

My **idiom **(notice the Python reference there?) would be to delete all the ’ self.bground = ‘’ ’ as they are now *always *assigned a value, but we had a similar discussion before

Are ‘activeGuide’, etc., standard pList items in ST? Or have you made them up for the plug-in? (I’ve struggled to find a list of the possible items.)

Andy.[/quote]

I just took the Monokai Bright Color Scheme file and modified it. I figured it needed to be in accordance with other scheme files. People can modify them if they want. I left everything in the settings section so it would be functional if some used it (I can’t imagine people using the grayscale one though). In the gray scale one, I gutted everything scope wise because everything is black accept comments which is gray. If something was italic or something, I left it in.

‘activeGuide’ controls the color of the stippled tab guides.

People can use my other plugin and convert the plist to a JSON file if they like that better for modifications. But I wanted to be universal with how I handle all input colors schemes.

@facelessuser: I like this

[code]class PrintHtmlCommand(sublime_plugin.WindowCommand):
def run(self, **kwargs):
view = self.window.active_view()
if view != None:
PrintHtml(view).run(**kwargs)

class PrintHtml(object):
def init(self, view):
self.view = view[/code]
I still prefer my idea of skipping past tabs and spaces, to reduce the number of spans:

while self.end <= self.line_end: scope_name = self.view.scope_name(self.pt) while (self.end <= self.line_end and (self.view.scope_name(self.end) == scope_name or (self.view.substr(self.end) in '\t', ' ', '']))): self.end += 1
but, then again, you need to keep an eye out for highlights and multi-selects.

The penny hasn’t quite dropped: are you using a table of two-columns, one for the gutter, and then spans in the second column? And using nbsp to keep your alignment?

Pretty much. Just two table columns. Text content is always in a styled span.

For code content I wrap it in a float:left div with width set to 100% and word break enabled. When I need to wrap, I just diff the column sizes and and then set the code column size to finite width.

CSS

<style type="text/css"> pre { border: 0; margin: 0; padding: 0; } table { border: 0; margin: 0; padding: 0; } div { float:left; width:100%; word-wrap: break-word; } .code_text { font: 12pt "Consolas", Consolas, Monospace; } .code_page { background-color: #FFFFFF; } .code_gutter { background-color: #E5E5E5;} span { border: 0; margin: 0; padding: 0; } body { color: #000000; } </style>

html line output

[code]

@facelessuser

Sorry, being a bit dim… You mention ‘text content’ and ‘code content’, but I can’t see the distinction in your code (yet). Do you mean that the 2nd column (containing the code) always contains a div?

And, as per your html output sample, are you using nbsp to align the line-numbers?

I hope the width behaves for you in other browsers

@facelessuser: I suspect it should be:

encode('utf-8', 'xmlcharrefreplace')

If you select some text to print, with the end point in the middle of a word, does it sometimes include an extra (following) character? Might just be mine and it’s not a biggie. Added: scrub this question - sorted. Andy.

[quote=“agibsonsw”]@facelessuser: I suspect it should be:

encode('utf-8', 'xmlcharrefreplace')

[/quote]

No. ‘ascii’ is correct. I have already tested it.

[quote=“agibsonsw”]
If you select some text to print, with the end point in the middle of a word, does it sometimes include an extra (following) character? Might just be mine and it’s not a biggie.[/quote]

Select in sublime? It used to, then I fixed it .

Oh, on a side note. I think I am going to add a shift click to hide/show the line numbers.

Do you mean in the HTML output, using JS? Or just a shortcut in ST to hide the gutter (I kinda assumed there would already be one somewhere to do this?).

I wrote a JS bookmarklet previously, so that I could hide elements on a page by clicking

javascript:(function(){var d=document,useMine=true,prevEl;function AddHandler(orig,mine) {return function(e){if(useMine)mine(e);else if(orig)orig(e);};}function Myonmouseover(e) {var evt=e||window.event;var elem=evt.target||evt.srcElement;elem.style.outline='2px solid gray'; prevEl=elem;}function Myonmouseout(e){var evt=e||window.event;var elem=evt.target||evt.srcElement;elem.style.outline='';} function Myonclick(e){var evt=e||window.event;var elem=evt.target||evt.srcElement;elem.style.display='none';} function Myonkeydown(e){var evt=e||window.event;if(evt.keyCode==27){prevEl.style.outline='';useMine=false;}} d.onmouseover=AddHandler(d.onmouseover,Myonmouseover);d.onmouseout=AddHandler(d.onmouseout,Myonmouseout); d.onclick=AddHandler(d.onclick,Myonclick);d.onkeydown=AddHandler(d.onkeydown,Myonkeydown);})()

But if I click a line number the whole page disappears because I’m actually clicking the ‘ol’ !

Andy.

In the HTML with JS. That way, you just style the Gutter has hidden or shown. If the person changes there mind and wants to see the gutter, you just toggle it.

Something like this probably.

[code]TOGGLE_GUTTER =
“”"

“”"[/code]*

Maybe not though, then I would have to re-wrap the HTML. We will see.

@facelessuser: You are re-kindling my interest in JS and I had to dig out my neat JS that highlights a table row (and displays the row number). The neat bit is that it remembers, and re-instates, the previous background colour: but I know it’s not relevant to what you’re looking at

var HighlightRows = function (tbl,colour,withIndex) { // Supply the table name (or object) and the colour you want for the highlight // E.g. HighlightRows('table1','yellow') // Any row background colour will be re-instated on mouseout; if a cell already // has a background colour this will remain. // If withIndex (optional) is true, pointing at a row will show a tooltip e.g. 'Row 24'. tbl = $(tbl); AddEvent(tbl,'mouseover',function (e) { var evt = e || window.event; var elem = evt.target || evt.srcElement; if ( elem.nodeName.toLowerCase() == 'td' ) { elem.prevColour = elem.parentNode.style.backgroundColor; elem.parentNode.style.backgroundColor = colour; if (typeof withIndex != 'undefined' && withIndex == true) elem.setAttribute('title','Row ' + elem.parentNode.rowIndex); } }); AddEvent(tbl,'mouseout',function (e) { var evt = e || window.event; var elem = evt.target || evt.srcElement; if ( elem.nodeName.toLowerCase() == 'td' ) { elem.parentNode.style.backgroundColor = elem.prevColour; } }); };
It is possible to hide a column just by changing the class-name of the table itself. It’s also possible with a tag, but this would require too much re-writing.

Perhaps using ‘visible’ instead of ‘display’ would prevent having to re-wrap the HTML, and the page wouldn’t jump (but it’s been a while… )

If you set the display to ‘table-cell’ by default in the css then you wouldn’t have to be concerned about null. That is, you can safely reference ‘style.display’ without any weird browser response. Andy.

Nah, I mainly need to rewrap because the width of the table changes and the wrapping is no longer valid. Remove gutter, and now I need to wrap less, etc. It is no big deal, I was feeling lazy, but I think I will address it anyways . I like the idea of being able to toggle the gutter too much.

@facelessuser

It just occurred to me that I could handle my tooltips just by modifying the current ‘scope_name’ and adding to the colour dictionary. That is, when I reach the pt (or region) for the tooltip I can add ’ tooltip’ at the end of the scope-name and create a corresponding colour-dictionary entry. Then, when I build the , I can look for ‘tooltip’ in the scope-name (or just use a flag) and amend it to . (The title will just pop up when I point at the element.)

I suppose a similar approach could have been taken with your highlighted text. However, it’s probably not as simple as it sounds.

Andy.

If you were using lists then you could just

list-style-type: none; list-style-position: inside;

I would still have to adjust wrapping though. I am trying to ensure it is XXXpx as specified by the user. But hiding would be pretty easy . I just had better wrap control with tables. And the format didn’t get messed up when I pasted it in Outlook and gmail etc. By no means am I against lists, it just didn’t work for what I wanted to do.