cherrytree2html.py

13.3.2013 20:13 | Přečteno: 1076× | Názory |

Je to již delší doba, co jsem zde psal o programu pro psaní poznámek nazvaném CherryTree. V blogpostu jsem programu silně vyčetl plesnivý HTML export, který je skutečným peklem, co se týče jeho použití v dalších systémech, jako je třeba ABClinuxu. Do diskuze jsem tenkrát vložil script jménem cherrytree_repairer.py, který trochu narovnával hrozivé HTML, které z CherryTree lezlo. Poslední dobou mi přestal vyhovovat a tak jsem vytvořil další script, o kterém bude dnes řeč.

Script se tentokrát nesnaží opravovat HTML export, protože mi došlo, jak je tento krok marný - s každou změnou programu se může změnit i HTML export a už mě nebavilo neustále script upravovat. Místo toho jsem se zaměřil na samotný XML soubor, ve kterém CherryTree uchovává informace.

Script vám umožňuje vybrat si, kterou nodu přesně chcete vyexportovat a tu poté můžete uložit v čistém HTML na disk. Samozřejmostí je export všech nod a interaktivní režim.

Zde je --help:

usage: cherrytree2html.py [-h] [-v] [-l] [-i] [-s] [-a] [-n NODE ID] [FN]

positional arguments:
  FN                    Filename.

optional arguments:
  -h, --help            show this help message and exit
  -v, --version         Print version.
  -l, --list            List names of all nodes.
  -i, --interactive     Interactive mode - select node and convert it to HTML.
  -s, --save            Save to file named [nodeid]_[ascii_nodename].html.
  -a, --all             Save all nodes to HTML.
  -n NODE ID, --node NODE ID
                        Print converted node to stdout.

Použití na testovacím souboru vypadá následovně:

$ cherrytree2html.py ukazka.ctd -l
1   - první
3   - subnoda
2   - druhá

$ cherrytree2html.py ukazka.ctd -n 2
<p>Jednoduše druhá subnoda.</p>

.ctd

Nutno dodat, že psaní konvertoru mi dalo nehezky zabrat. Co se na začátku jevilo jako snadná práce se po bližším zkoumání XML souboru, který CherryTree používá ukázalo jako ojeb. V tomhle XML totiž jen máloco dává smysl - viz codebox.

Člověk by čekal, že se bude jednat o značku <codebox>, jenž bude obsahovat text, který do něj vložíte. Potud je vše ok, až na to, že z nějakého nesmyslného důvodu jsou všechny nahrnuty na konec dokumentu. Proč? Kdo ví.

Abych předvedl užitečnost konvertoru, zde je ukázka testovací nody tak jak je obsažena v přiloženém souboru ukazka.ctd:

<node name="první" prog_lang="custom-colors" readonly="False" tags="" unique_id="1"><rich_text>Toho je obsah první nody.

</rich_text><rich_text scale="h1">h1 nadpis</rich_text><rich_text>
Zde by mohl být nějaký ten obsah:

Export podporuje </rich_text><rich_text weight="heavy">tučný text</rich_text><rich_text>, </rich_text><rich_text underline="single">podtržený text</rich_text><rich_text>, </rich_text><rich_text style="italic">kurzivu</rich_text><rich_text> </rich_text><rich_text strikethrough="true" style="italic" weight="heavy">a</rich_text><rich_text> </rich_text><rich_text underline="single" weight="heavy">jejich</rich_text><rich_text> </rich_text><rich_text style="italic" weight="heavy">různé</rich_text><rich_text> </rich_text><rich_text style="italic" underline="single">kombinace</rich_text><rich_text>. Dále je zde </rich_text><rich_text scale="small">malý text</rich_text><rich_text>, </rich_text><rich_text scale="sup">horní index</rich_text><rich_text>, </rich_text><rich_text scale="sub">dolní index</rich_text><rich_text> a </rich_text><rich_text family="monospace">&lt;tt&gt; tag způsobující písmo s pevnou šířkou</rich_text><rich_text>. Jo a taky </rich_text><rich_text strikethrough="true">škrtnutý text</rich_text><rich_text>.

</rich_text><rich_text scale="h2">h2 nadpis</rich_text><rich_text>
Používat se dají </rich_text><rich_text link="webs http://kitakitsune.org/">odkazy</rich_text><rich_text>. Co CherryTree samo o sobě neumí jsou relativní odkazy, pokud je chcete použít, vytvořte odkaz na </rich_text><rich_text link="file dWthemthLmN0ZA==">lokální soubor</rich_text><rich_text>, exporter už si to přebere.

</rich_text><rich_text scale="h3">h3 nadpis</rich_text><rich_text>
Seznam podporovaných věcí se tím blíží ke konci, poslední věcí jsou codeboxy:

</rich_text><rich_text justification="left"></rich_text><rich_text>

</rich_text><rich_text scale="h2">další h2</rich_text><rich_text>
Jako obsah druhého h2 si dáme další codebox:

</rich_text><rich_text justification="left"></rich_text><rich_text>

</rich_text><rich_text scale="h1">další h1 nadpis</rich_text><rich_text>
</rich_text><rich_text scale="h2">poslední h2</rich_text><rich_text>
No a zde by v ideálním světě mohlo být nějaké to závěrečné povídání.</rich_text><codebox char_offset="536" frame_height="40" frame_width="700" highlight_brackets="False" show_line_numbers="False" syntax_highlighting="html" width_in_pixels="True">HTML &lt;codebox&gt;Yay&lt;/codebox&gt;.</codebox><codebox char_offset="594" frame_height="40" frame_width="700" highlight_brackets="False" show_line_numbers="False" syntax_highlighting="html" width_in_pixels="True">Prostě jen další codebox, jen abych demonstroval, jak je pak interní XML formát nahrne na konec nody.</codebox><node name="subnoda" prog_lang="custom-colors" readonly="False" tags="" unique_id="3"><rich_text>Toto je obsah subnody.</rich_text></node></node>

Či kód proprohnaný přes beautifier pokud se vám to nechce luštit:

<node name="první" prog_lang="custom-colors" readonly="False" tags="" unique_id="1">
    <rich_text>Toho je obsah první nody.

</rich_text>
    <rich_text scale="h1">h1 nadpis</rich_text>
    <rich_text>
Zde by mohl být nějaký ten obsah:

Export podporuje </rich_text>
    <rich_text weight="heavy">tučný text</rich_text>
    <rich_text>, </rich_text>
    <rich_text underline="single">podtržený text</rich_text>
    <rich_text>, </rich_text>
    <rich_text style="italic">kurzivu</rich_text>
    <rich_text></rich_text>
    <rich_text strikethrough="true" style="italic" weight="heavy">a</rich_text>
    <rich_text></rich_text>
    <rich_text underline="single" weight="heavy">jejich</rich_text>
    <rich_text></rich_text>
    <rich_text style="italic" weight="heavy">různé</rich_text>
    <rich_text></rich_text>
    <rich_text style="italic" underline="single">kombinace</rich_text>
    <rich_text>. Dále je zde </rich_text>
    <rich_text scale="small">malý text</rich_text>
    <rich_text>, </rich_text>
    <rich_text scale="sup">horní index</rich_text>
    <rich_text>, </rich_text>
    <rich_text scale="sub">dolní index</rich_text>
    <rich_text> a </rich_text>
    <rich_text family="monospace"><tt> tag způsobující písmo s pevnou šířkou</rich_text>
    <rich_text>. Jo a taky </rich_text>
    <rich_text strikethrough="true">škrtnutý text</rich_text>
    <rich_text>.

</rich_text>
    <rich_text scale="h2">h2 nadpis</rich_text>
    <rich_text>
Používat se dají </rich_text>
    <rich_text link="webs http://kitakitsune.org/">odkazy</rich_text>
    <rich_text>. Co CherryTree samo o sobě neumí jsou relativní odkazy, pokud je chcete použít, vytvořte odkaz na </rich_text>
    <rich_text link="file dWthemthLmN0ZA==">lokální soubor</rich_text>
    <rich_text>, exporter už si to přebere.

</rich_text>
    <rich_text scale="h3">h3 nadpis</rich_text>
    <rich_text>
Seznam podporovaných věcí se tím blíží ke konci, poslední věcí jsou codeboxy:

</rich_text>
    <rich_text justification="left"></rich_text>
    <rich_text></rich_text>
    <rich_text scale="h2">další h2</rich_text>
    <rich_text>
Jako obsah druhého h2 si dáme další codebox:

</rich_text>
    <rich_text justification="left"></rich_text>
    <rich_text></rich_text>
    <rich_text scale="h1">další h1 nadpis</rich_text>
    <rich_text></rich_text>
    <rich_text scale="h2">poslední h2</rich_text>
    <rich_text>
No a zde by v ideálním světě mohlo být nějaké to závěrečné povídání.</rich_text>
    <codebox char_offset="536" frame_height="40" frame_width="700" highlight_brackets="False" show_line_numbers="False" syntax_highlighting="html" width_in_pixels="True">HTML <codebox>Yay</codebox>.</codebox>
    <codebox char_offset="594" frame_height="40" frame_width="700" highlight_brackets="False" show_line_numbers="False" syntax_highlighting="html" width_in_pixels="True">Prostě jen další codebox, jen abych demonstroval, jak je pak interní XML formát nahrne na konec nody.</codebox>
    <node name="subnoda" prog_lang="custom-colors" readonly="False" tags="" unique_id="3">
        <rich_text>Toto je obsah subnody.</rich_text>
    </node>
</node>

Jak je možné vidět pokud si dáte tu práci s luštěním XML slitiny, v místě kde by se měl nacházet <codebox> najdeme jen <rich_text justification="left"></rich_text> a <codebox> je pak na konci nody.

Všimněte si další podivné vlastnosti; XML tagy <rich_text> mají vždy jen plaintext obsah a nikdy v sobě nemají vloženy další tagy, jak je to zvykem u HTML. Pěkně je to vidět třeba na nadpisu:

</rich_text><rich_text scale="h2">h2 nadpis</rich_text><rich_text>

Autor programu prvně ukončí <rich_text>, pak přidá <rich_text scale="h2">, hned ho zase ukončí a znova otevře další <rich_text>. Jaký to má smysl opravdu netuším.

Srovnání exportu

CherryTree export

Zde je vidět výstup pokud soubor vyexportujete pomocí interních mechanismů CherryTree:

<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>první</title><meta name="generator" content="CherryTree"></head><body><span style="font-family: Sans; font-size:9pt">Toho je obsah první nody.<br><br><span style="font-size:xx-large;">h1 nadpis</span><br>Zde by mohl být nějaký ten obsah:<br><br>Export podporuje <b>tučný text</b>, <span style="text-decoration:underline;">podtržený text</span>, <i>kurzivu</i> <i><b><span style="text-decoration:line-through;">a</span></b></i> <b><span style="text-decoration:underline;">jejich</span></b> <i><b>různé</b></i> <i><span style="text-decoration:underline;">kombinace</span></i>. Dále je zde <span style="font-size:x-small;">malý text</span>, <sup>horní index</sup>, <sub>dolní index</sub> a <tt>&lt;tt&gt; tag způsobující písmo s pevnou šířkou</tt>. Jo a taky <span style="text-decoration:line-through;">škrtnutý text</span>.<br><br><span style="font-size:x-large;">h2 nadpis</span><br>Používat se dají <a href="http://kitakitsune.org/">odkazy</a>. Co CherryTree samo o sobě neumí jsou relativní odkazy, pokud je chcete použít, použijte <a href="http://./ukazka.ctd">klasický internetový odkaz</a> a adresu začněte <tt>./</tt> či <tt>/</tt>. Nehleďte na to co s ním CherryTree udělá, script už si to nějak přebere.<br><br><span style="font-size:large;">h3 nadpis</span><br>Seznam podporovaných věcí se tím blíží ke konci, poslední věcí jsou codeboxy:<br><br><table border="1" style="display:inline-table; font-family: Monospace; font-size:9pt"><tr><td>HTML&nbsp;<span style="color:#008a8c;font-weight:400">&lt;codebox&gt;</span>Yay<span style="color:#008a8c;font-weight:400">&lt;/codebox&gt;</span>.</td></tr></table><br><br><span style="font-size:x-large;">další h2</span><br>Jako obsah druhého h2 si dáme další codebox:<br><br><table border="1" style="display:inline-table; font-family: Monospace; font-size:9pt"><tr><td>Prostě&nbsp;jen&nbsp;další&nbsp;codebox,&nbsp;jen&nbsp;abych&nbsp;demonstroval,&nbsp;jak&nbsp;je&nbsp;pak&nbsp;interní&nbsp;XML&nbsp;formát&nbsp;nahrne&nbsp;na&nbsp;konec&nbsp;nody.</td></tr></table><br><br><span style="font-size:xx-large;">další h1 nadpis</span><br><span style="font-size:x-large;">poslední h2</span><br>No a zde by v ideálním světě mohlo být nějaké to závěrečné povídání.</span></body></html>

Či opět kód prohnaný přes beautifier:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      první
    </title>
    <meta name="generator" content="CherryTree">
  </head>
  <body>
    <span style="font-family: Sans; font-size:9pt">
      Toho je obsah první nody.
      <br>
      <br>
      <span style="font-size:xx-large;">
        h1 nadpis
      </span>
      <br>
      Zde by mohl být nějaký ten obsah:
      <br>
      <br>
      Export podporuje 
      <b>
        tučný text
      </b>
      , 
      <span style="text-decoration:underline;">
        podtržený text
      </span>
      , 
      <i>
        kurzivu
      </i>
      
      <i>
        <b>
          <span style="text-decoration:line-through;">
            a
          </span>
        </b>
      </i>
      
      <b>
        <span style="text-decoration:underline;">
          jejich
        </span>
      </b>
      
      <i>
        <b>
          různé
        </b>
      </i>
      
      <i>
        <span style="text-decoration:underline;">
          kombinace
        </span>
      </i>
      . Dále je zde 
      <span style="font-size:x-small;">
        malý text
      </span>
      , 
      <sup>
        horní index
      </sup>
      , 
      <sub>
        dolní index
      </sub>
      a 
      <tt>
        <tt> tag způsobující písmo s pevnou šířkou
      </tt>
      . Jo a taky 
      <span style="text-decoration:line-through;">
        škrtnutý text
      </span>
      .
      <br>
      <br>
      <span style="font-size:x-large;">
        h2 nadpis
      </span>
      <br>
      Používat se dají 
      <a href="http://kitakitsune.org/">
        odkazy
      </a>
      . Co CherryTree samo o sobě neumí jsou relativní odkazy, pokud je chcete použít, použijte 
      <a href="http://./ukazka.ctd">
        klasický internetový odkaz
      </a>
      a adresu začněte 
      <tt>
        ./
      </tt>
      či 
      <tt>
        /
      </tt>
      . Nehleďte na to co s ním CherryTree udělá, script už si to nějak přebere.
      <br>
      <br>
      <span style="font-size:large;">
        h3 nadpis
      </span>
      <br>
      Seznam podporovaných věcí se tím blíží ke konci, poslední věcí jsou codeboxy:
      <br>
      <br>
      <table border="1" style="display:inline-table; font-family: Monospace; font-size:9pt">
        <tr>
          <td>
            HTML 
            <span style="color:#008a8c;font-weight:400">
              <codebox>
            </span>
            Yay
            <span style="color:#008a8c;font-weight:400">
              </codebox>
            </span>
            .
          </td>
        </tr>
      </table>
      <br>
      <br>
      <span style="font-size:x-large;">
        další h2
      </span>
      <br>
      Jako obsah druhého h2 si dáme další codebox:
      <br>
      <br>
      <table border="1" style="display:inline-table; font-family: Monospace; font-size:9pt">
        <tr>
          <td>
            Prostě jen další codebox, jen abych demonstroval, jak je pak interní XML formát nahrne na konec nody.
          </td>
        </tr>
      </table>
      <br>
      <br>
      <span style="font-size:xx-large;">
        další h1 nadpis
      </span>
      <br>
      <span style="font-size:x-large;">
        poslední h2
      </span>
      <br>
      No a zde by v ideálním světě mohlo být nějaké to závěrečné povídání.
    </span>
  </body>
</html>

Nádhera, že? Téměr vše je řešeno pomocí style=".." atributu, namísto aby autor použil příslušné HTML tagy. To že je vše slito na jeden řádek a probíhají tam prasárny jako nastavování velikosti písma (font-size:9pt), používání tabulek místo <pre> tagů či totální ignorace odstavců, které jsou řešeny pomocí <br> tagů radši ani nebudu komentovat.

Co s tímto úžasným exportem udělá prakticky libovolný redakční systém je doufám jasné - pošle vás s ním do háje.

Pokud chcete získat bobříka trpělivosti, zkuste si uvedený kód vyčistit tak, aby ho abclinuxu přijalo.

cherrytree2html.py export

Zde je ukázka výstupu z mého scriptu:

<p>Toho je obsah první nody.</p>

<h1>h1 nadpis</h1>

<p>Zde by mohl být nějaký ten obsah:</p>

<p>Export podporuje <strong>tučný text</strong>, <u>podtržený text</u>, <i>kurzivu</i> <del><i><strong>a</strong></i></del> <u><strong>jejich</strong></u> <i><strong>různé</strong></i> <u><i>kombinace</i></u>. Dále je zde <small>malý text</small>, <sup>horní index</sup>, <sub>dolní index</sub> a <tt>&lt;tt&gt; tag způsobující písmo s pevnou šířkou</tt>. Jo a taky <del>škrtnutý text</del>.</p>

<h2>h2 nadpis</h2>

<p>Používat se dají <a href="http://kitakitsune.org/">odkazy</a>. Co CherryTree samo o sobě neumí jsou relativní odkazy, pokud je chcete použít, použijte <a href="./ukazka.ctd">klasický internetový odkaz</a> a adresu začněte <tt>./</tt> či <tt>/</tt>. Nehleďte na to co s ním CherryTree udělá, script už si to nějak přebere.</p>

<h3>h3 nadpis</h3>

<p>Seznam podporovaných věcí se tím blíží ke konci, poslední věcí jsou codeboxy:</p>

<pre syntax="html">HTML &lt;codebox&gt;Yay&lt;/codebox&gt;.</pre>

<h2>další h2</h2>

<p>Jako obsah druhého h2 si dáme další codebox:</p>

<pre syntax="html">Prostě jen další codebox, jen abych demonstroval, jak je pak interní XML formát nahrne na konec nody.</pre>

<h1>další h1 nadpis</h1>

<h2>poslední h2</h2>

<p>No a zde by v ideálním světě mohlo být nějaké to závěrečné povídání.</p>

Download

Script jsem hodil na github:

• https://github.com/Bystroushaak/cherrytree2html.py

Pro jeho běh to bude chtít ještě HTML/XML parser:

• https://github.com/Bystroushaak/pyDHTMLParser

       

Komentáře

[Pepa]

Díky vyzkouším. Cherrytree je výborný program skoro tak dobrý jako Zim. Po něm následuje nejnovější betaverze Treeline :)

[Tomáš]

V zápisku jsem nenašel, že bys nabídl patch autorovi. Mohl bys tím zlepšit celou aplikaci a nebyly by potřeba žádné obezličky.

[Bystroushaak]

Jo. Protože jsem moc líný :3

Musel bych mu psát v angličtině, pak nějak argumentovat proč jo a proč ne atd.. K tomu mu vysvětlovat, proč používám vlastní HTML parser (protože chci) a nakonec bych musel přidat podporu všech možností CherryTree, která tam teď není (umí to jen to, co jsem potřeboval, aby to umělo, ne všechno).

[radix]

Je to sice komerc, ale na toto se mi daleko lepe osvedcil Notecase Pro.

[xkucf03]

Přijde mi to jako ukázka toho, jak by XML formát neměl vypadat. Někdo se asi bál, že bude mít příliš mnoho elementů a chtěl to mít jednoduché, tak udělal jeden element rich_text a všechno nacpal do atributů. Aby to bylo ještě jednodušší nevyužil toho, že XML umožňuje krásně popisovat hierarchické struktury a zploštil to a namastil za sebe na jednu úroveň. Kódování názvu souboru do Base64 je taky zbytečnost – asi někomu přišlo příliš složité použít standardní URL kódování. Dávat do atributu link vnitřně strukturovaný text, který pak musím zase parsovat, je taky zvrácenost (slova file a webs následovaná mezerou a pak vlastním odkazem), odporuje to obecným doporučením, jak by měl XML formát vypadat. Jenže dát tam vedle toho atribut třeba typOdkazu="…" je buď nenapadlo nebo si to chtěli zjednodušit. S tou snahou věci zjednodušovat se to dneska někdy přehání. To je plno keců o KISS a averzi k enterprise a overengineeringu a pak to takhle dopadá.

Ty codeboxy jsou taky úlet – ještě bych pochopil, kdyby se na ně odkazoval přes ID elementu (pak ať jsou klidně na konci dokumentu, ať nepřekáží dlouhé výpisy kódů uvnitř… pokud to tedy někomu vadí).

Podstatný nedostatek je absence sémantiky – představoval bych si to tak, že v dokumentu budou vyznačení styly (nadpis, zvýrazněný text atd.) a grafické ztvárnění bude popsané zvlášť. Prostě nepoužívat WYSIWYG, ale WYSIWYM (vizuální dojem při editaci může být takřka stejný, ale data, která z toho polezou budou kvalitativně na vyšší úrovni a dále použitelná).

Asi bych se na to vykašlal a našel si jiný software – nebo CherryTree trochu překopat: navrhnout nový XML formát s hierarchií a sémantikou a editor přepracovat na WYSIWYM.

P.S. jeden odstavec plný nadávek a urážek jsem raději smazal

[smazáno]

Idealne vyhodit i to XML, kdyz uz se v tom nekdo bude hrabat

[xkucf03]

Co navrhuješ místo něj? V čem by to bylo lepší?

[Bystroushaak]

Jo, je to úlet. Problém je, že mi můj .ctd krapet nabobtnal a teď v něm mám něco přes 130 nod, takže přechod někam jinam by docela bolel. Navíc jsem s CherryTree jinak dlouhodobě spokojený a prostě se mi v něm pracuje dobře.

[Marián Kyral]

Na codeboxu mi vadí, že v něm nefunguje výběr a vkládání prostředním tlačítkem. Možná se někdy dostanu k tomu, že to nahlásím. Taky změna velikosti CB je možná jen klávesovými zkratkami. Roztažení myší by se mi líbilo více.

[Bystroushaak]

Jo, to roztažení klávesovými zkratkami docela dost saje. Hlavně proto, že mi to s pravděpodobností 50:50 shodí celé cherrytree.

[Marián Kyral]

Teď jsem to už nějakou dobu nepotřeboval, ale nepamatuji si, že by mi Cherrytree nějak padalo. Možná jednou dvakrát. S těmi kl. zkratkami je spíše problém, že si je nikdy nepamatuji a vždy nějakou dobu trvá, než najdu tu správnou.