HTML without tables
MBurchard opened this issue · 26 comments
The Plugin itself is really wonderful, nearly the solution I searched for.
The Problem is, when I copy the HTML from the Browser view, it contains cells and this doesn't look nice, when copied into a mail, Richtext Editor or Open Office / Word.
Would be nice to be able to deactivate table generation same way as deactivating line numbers.
For now I just use a simple script from the firebug console:
var codeCells = document.querySelectorAll('table.code_page td.code_line');
console.log('Code Zeilen:', codeCells.length);
var table = document.createElement('table');
table.className = 'code_page';
document.querySelector('pre.code_page').appendChild(table);
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
cell.className = 'code_line';
row.appendChild(cell);
for (var i = 0; i < codeCells.length; i++) {
cell.appendChild(codeCells[i].firstChild);
}
I have to be honest, I use the table specifically so the code comes out looking good in Outlook/Powerpoint/Word etc.. This was specifically done to keep background colors looking uniform and presentable as you get a clean boundary opposed to a a jagged right side.
Maybe you are using this somehow different than I am, it would be nice if you could elaborate on the problem you have more.
I am open to pull requests. This, like conditional gutters etc., can be done by javascript snippets. If you have one that suites your needs, you can include it just like I do the others. As long as it works in the major browsers and doesn't have adverse effects on anything else, I don't think I would have a problem including it as it would be a completely optional feature.
Any more info on your specific issue you are trying to solve? I need communication to keep flowing while I am trying to determine what is to be done. If communication is no longer continuing, I will have to close this issue.
Sorry, had no time so fare to give more input. I thought about writing some JavaScript that you may include that switches from table to non table layout. If interested the resulting html may also be generated by default depending on configuration.
Hi, I'm also interested in the table-less HTML result.
My issue is when pasting into Evernote (I use it as my snippet repository)
Evernote applies a hardcoded format (margin 5px) to all the cells in a note, making the result to look bad.
Its not possible to change the way Evernote formats the tables within the notes, so I guess the only option in my case is to avoid tables.
Have tried the javascript suggested by MBurchard and it works well, but it also gets rid of the line numbers, so the result is not the same.
Thanks!
@jvanoli this actually helps me understand the problem more. This was built around my specific use case, so understanding how other people use the plugin helps me to re-evaluate what I am willing to do. Thanks.
Preserving line numbers shouldn't be a problem, though the hide/show of line numbers should probably be updated to work with the non-table format. I assume the wrapping option would need to be updated as well. Worse case scenario, when using no tables, it could just always show line numbers and disable wrapping. Without the table, the gutter may be larger as the line number increases in size, but that is a minor issue.
So yeah, I think this is completely doable for the Javascript route. It internally the output could be modified to output without tables, but I am just not motivated to do all of that at the present. I would probably need to clean up and overhaul some internal code to cleanly do that (maybe in the future). But for now, I think a Javascript solution is sufficient.
If I get some more time soon, I will look into this. Though if someone gets a pull request done before me, that would work too 😄.
I'd love it if it was possible to export without tables or background colours. I usually find myself pasting into Keynote or Powerpoint Templates which already have the right background colour, so I just need the text to be coloured. 👍
You can just create a color scheme with the same background as your powerpoint template and associate that color scheme to an export command. I have found the tables to work fine in powerpoint etc.
While I do plan on allowing a non table version (very low priority for me) keep in mind that simple copy and paste may not pick up the pre and/or code elements outside a table. For some reason, copy and pasting tables always worked more reliable for me with tables when I paste code into emails and/or powerpoints.
If not having background color is really supper important, you may consider writing a script to strip them out of the HTML content as I have no intention of provided that functionality. ExportHtml is meant to replicate the Sublime color scheme; I don't want to deviate from that mission statement.
Thanks. I threw together a bookmarklet to sort the stuff I wanted out and wrote up some instructions here: https://github.com/dannysmith/ExportHTML-keynote-paste-corrector
Thanks for the plugin – it's saved me heaps of time already 👍
Updates on this? I need this feature as well.
If no one has the time to implement a toolbar control that works with the gutter toggle, I'd be willing to give this a go.
I am pretty busy currently, and this is a very low priority for me as I do not need this feature. When I have time and motivation, I will look into this.
Just adding a +1 to this issue. Pasting into google docs results in extra lines and makes it hard to edit in place.
You do realize, that it isn't going to copy and paste into google docs like you think right? When I add this, it will most likely be wrapped in something like a <pre><code></code></pre> . If you want to know how well it works, try something like copying and pasting a code block from this highlight.js demo (pick a style that doesn't have a white background): https://highlightjs.org/.
I don't mind adding the no table option (when I have time and motivation), but the reason why it was done in a table was to provide a format that copies and pastes into emails as a nice block with proper backgrounds (which it does, and I use it at work). I could see the no table option to be okay if you want to paste the source in an HTML document, but pasting in google docs is going to suck no matter what you do. I guess unless you only work with white a background color scheme.
Anyways, I'd encourage anyone that wants to plus one to use the GitHub reaction feature as +1 just adds noise here.
This is the fork I use: ismell@e462af1
With the following settings:
{
"html_panel": [
// Browser view color (selections and multi-selections allowed)
{
"Browser View - Color w/o Numbers": {
"numbers": false,
"multi_select": true,
"disable_nbsp": true,
"no_header": true,
"color_scheme": "Packages/ExportHtml/ColorSchemes/Print-Color.tmTheme"
}
},
]
}
It works really well with google docs. Not sure how it works with powerpoint or anything else though.
What about background colors? I see you are using the Print-Color.tmTheme, so I guess you don't care about them. If that is all people want, that's fine. I can create a mode that avoids tables, omits gutter (and gutter related toggling via toolbar), nbsp would not be needed in this case either.
If you are using a background color, you'll get the usual empty lines with no background, jagged line edge as backgrounds only extend to the end of the span, etc. For copy and paste that is. The HTML will look fine.
Alright, table haters 🙂 , new branch here: https://github.com/facelessuser/ExportHtml/tree/feature/no-table.
I haven't tested it much, but seems to work okay in chrome. Functionally should feel the same as table except when you copy and paste. You can turn off table mode with the table_mode option:
// Browser view color (selections and multi-selections allowed)
{
"Browser View - Current Color": {
"numbers": true,
"multi_select": true,
"table_mode": false
}
},I'll probably do some refactoring of things before this gets released. Maybe cleanup output formats etc. But this will be in the next release.
Cool. Just tried it and it looks like numbers: false is being ignored.
I haven't extensively tested it yet. Numbers can be hidden with JS, I know that works, but maybe they aren't getting auto hidden. I think they are always getting rendered like they were with tables and just hidden. It's possible I broke that.
I'll make sure that's working before I merge.
Gutters now hide when "numbers": false on "table_mode": false. Setting name is subject to change between now and release. I'm going to clean up JS and CSS stuff, and I may or may not change the name of table_mode etc.
Just tried both of these:
{
"html_panel": [
// Browser view color (selections and multi-selections allowed)
{
"Browser View - Color w/ Numbers": {
"numbers": true,
"multi_select": true,
"table_mode": false,
"disable_nbsp": true,
"color_scheme": "Packages/ExportHtml/ColorSchemes/Print-Color.tmTheme"
}
},
{
"Browser View - Color w/o Numbers": {
"numbers": false,
"multi_select": true,
"table_mode": false,
"disable_nbsp": true,
"color_scheme": "Packages/ExportHtml/ColorSchemes/Print-Color.tmTheme"
}
},
]
}
and it works. disable_nbsp: true needs to be set for copy/pasting to work into google docs. Thanks!
Looking at the output html
<span class="code_line">
<span id="C_0_65">
<span class=" real_text" style="background-color: #FFFFFF; color: #000000;"> </span>
</span>
</span>
Could you merge the code_line span with the id span?
Nbsp stuff isn't a concern for me. It's to help with wrapping for print and can be disable as desired.
As for combining spans, why do you need it combined? Does it add something undesirable? Or you find it aesthetically unpleasing when looking at the source?
Argh, phone autocorrect...
Just aesthetics. When inspecting the source with chrome developer tools, it takes chrome quite a while to load a large file.
If I have no reason to preserve it, I can probably combine it. I'll have to look at the source again. It may be because that is how the code is structured for table output, but I'll see.
@ismell Span has been collapsed.
I'm going to go ahead and pull the trigger on this. If bugs are discovered, we'll deal with them then.