Export Formats

Hello there,

sadly i have to work in two worlds for my business, macOS / iOS for me (for obvious Reasons :wink: ) , but also in Windows. :frowning:

I have the save as MD and HTML fully integrated on my Plattforms, but have Problems export it in a nice Format to Outlook or Word.

Is there already a known way to export formatted to “Windows World”?

Thanks for your Help.

P.S.: My first Outlining App, love it! Typing infinity, Keyboard Support… great Unique Ideas (afaik).

Bike can copy/paste and read/write a subset of RTF format.

If you want to share a .rtf file with windows I think you can:

  1. Create a new .rtf file using TextEdit
  2. Open and edit that file in Bike
  3. Save, etc … when you are ready to work on windows just copy that .rtf file

Bike supports basic RTF formatting, bold, italic, links. It doesn’t support higher level features such as lists and whatever other things RTF supports.

When editing a .rtf file in Bike it works similar to editing a .txt document. When saving the outline structure is encoded with whitespace indentation. Outline metadata (such as unique id’s for each row) is not saved.

and via pandoc to .docx is another option:

I tried with textedit, Pages, MS Word and Outlook, but there is only the indentation, no list format. Apple Mail works, i think because of html format. Is the “only indentation, no list format” for a specific purpose? If not, i want to suggest adding them also in rtf export, if possible.

Thanks for bringing up that pandoc post. pandoc was still in my “want to get into”… first export worked well.

1 Like

sooo, after some digging pandoc cannot use every font you want, at least i didnt find it. Lately i played with python-markdown and checked if there is also a way. There is a python package to place/replace tags in html. So combining them with css and you get a live Webview. Most styles are preserved with copy-paste.

Usage:
Save both files, or do your own css.

Terminal.app:

python3 Bike-Webview.py Example.bike Nice.css

Open Safari: http://127.0.0.1:5000

Note:
The filename is added as h1 html tag, exact as you use it as shell parameter… for sure there is a way to make it a filepath and extract filename. I dont use h1 because then i can just CMD+A, CMD+C. To remove it, just remove the whole block starting with “# H1” in the py app.

I am a sysadmin, no dev, having fun. So this is really basic scraped stuff, and the css should get some cleanup. Anyway:

Bike-Webview.py:

import sys
from flask import Flask, render_template_string
from bs4 import BeautifulSoup

app = Flask(__name__)

@app.route('/')
def serve_modified_html():

    bike_file = sys.argv[1] 
    css_file = sys.argv[2]

    # HTML-Datei einlesen
    with open(bike_file, 'r') as file:
        html = file.read()

    # CSS-Datei einlesen
    with open(css_file, 'r') as file:
        css = file.read()

    # BeautifulSoup-Objekt erstellen
    soup = BeautifulSoup(html, 'html.parser')

    # CSS-Tag erstellen und CSS-Regeln einfügen
    css_tag = soup.new_tag('style')
    css_tag.string = css
    # CSS-Tag zum head-Bereich hinzufügen
    head_tag = soup.head
    head_tag.append(css_tag)


    # H1 erstellen
    h1_tag = soup.new_tag('h1')
    h1_tag.string = bike_file    
    # h1-Tag zum body-Bereich hinzufügen
    body_tag = soup.body
    body_tag.insert_before(h1_tag)

    # Modifiziertes HTML als String zurückgeben
    modified_html = str(soup)

    return render_template_string(modified_html)

if __name__ == '__main__':
    app.run()

Nice.css:

 /* @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); */
 /* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');
a,b,abbr, blockquote, code, div, i, iframe, kbd, li, ol, p, pre, s, span, strike, strong, table, tbody, td, th, thead, tr, tt, u, ul {
    margin: 0;
    #padding: 0;
    border: 0;
    font: inherit;
    vertical-align:baseline
}


html {
    scroll-behavior:smooth
}

@media screen and (prefers-reduced-motion: reduce) {
    body {
        scroll-behavior:auto
    }
}

/* Body */
body {
    background: #FCFCFC;
    font-family: IBM Plex Sans;
    # font-family: Roboto; 
    /* "default"
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    */
    color: #333333;
    font-size: 14,5px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 740px;
    padding: 0;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}



/* Headings  */
h1 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1em 0 0.5em;
    color: #444444;
}

h1 {
    font-size: 36px;
    text-align: center;
}

a {
    text-decoration: none;
    color:inherit
}

a:active, a:hover {
    outline:0
}
a {
  color: #007aff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.b, b:not([class]) {
    font-weight:600
}

.b.is-strong {
    font-weight:700
}

.strong, strong:not([class]) {
    font-weight:700
}

.em, .i, em:not([class]), i:not([class]) {
    font-style:italic
}


ul li, ol li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.ol ol, .ol ul, .ul ol, .ul ul, ol:not([class]) ol, ol:not([class]) ul, ul:not([class]) ol, ul:not([class]) ul {
    margin-top: 0;
    margin-bottom:0
}

.ul ul, ul:not([class]) ul {
    list-style:circle
}


.ol, .ul, ol:not([class]), ul:not([class]) {
    margin-bottom: 1.4em;
    padding-left:1.5em
}

.ol, .ul, ol:not([class]), ul:not([class]) {
    margin-bottom: 1.4em;
    padding-left:1.5em
}

.ul, ul:not([class]) {
    list-style:disc
}

.ol, ol:not([class]) {
    list-style:decimal
}

.li::marker, li:not([class])::marker {
    color:rgba(0, 15, 36, .46)
}


.mark, mark:not([class]) {
    padding: 0 .25em;
    color: inherit;
    background-color: #fcf9cf;
    border-radius:.25em
}

code {
    padding: 0.2em 0.4em; 
    
    background: #F1F1F1;
    color: #444444;

    border: 1px solid rgba(0, 48, 111, .04);
    border-radius: .5em;
    font-family: IBM Plex Mono;
    # font-family: Roboto Mono;
    /* font-family: ui-monospace, SFMono-Regular, Menlo, "Andale Mono", Consolas, Monaco, monospace; */
    font-size: 0.9em;
}

.code, code:not([class]) {
    padding: 0 .25em;

    background: #F1F1F1;
    color: rgba(0, 4, 10, .69);
    
    #border: 1px solid rgba(0, 48, 111, .04);
    border-radius: 3px;
    font-family: IBM Plex Mono;
    # font-family: Roboto Mono;
    /* font-family: ui-monospace, SFMono-Regular, Menlo, "Andale Mono", Consolas, Monaco, monospace; */
    font-size: 14;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap:break-word;
}

I hope such post is ok for you all. Maybe me or some real dev in here got a “fine” way to add parameters. Shortcuts should be no problem.

I actually started with exporting rtf lists, but that created problems. There were a number of common copy/paste scenarios where the target app would choose Bike’s RTF content from clipboard, but wouldn’t be able to handle the lists formatting well. Just providing basic inline RTF attributes works well in those scenarios though.

Generally don’t really understand much about RTF and don’t consider it an essential piece of Bike… I just want to support it in the most basic inline formatting fashion.

It’s great, thanks for sharing. You might want to add a link from the extension Wiki here:

Edit Also in your screenshot the “Focus Arrow” are looking too big. Can you verify that the latest Bike preview fixes that … they should look about half the size as they are shown in your screenshot.

Cool then…

About the arrows, i am not sure:
Bildschirmfoto-Bike_ 2023-05-23_000253

Hum, no those are still too big, but you are also not running the latest preview.

It should be 131 … I’m not sure why the update isn’t working for you (maybe did you uncheck “Include Preview Releases” in settings? … My local copy did get properly updated. Maybe some caching somewhere that will hopefully be resolved. Anyway you can download 131 directly from this page:

https://www.hogbaysoftware.com/bike/releases/

The option was not activated, with activation i got the update. I think some night i activated it and later wanted to fall back to normal build… These are smaller and look nicer to me. But i do often click them on accident, when switching lines with mouse. Naturally i want to click on the end of the line to edit, the arrow is a bit too close for me.

Bildschirmfoto-Bike_ 2023-05-23_000257

How do i do the link to extensions? I have also a RSS Feeds to Bike Shortcut. Great duo, have to investigate, integrate to mkdocs someday.
edit: Shortcut gets RSS Feeds from a List you have to fill inside. It creates a new Bike File and orders them nicely…

Shortcut: Bike - RSS Feeds. Preview:

The Bike Extensions Wiki is a special “wiki” post and has an “Edit” button at the bottom right corner of the post. Click that and you can add links to any Bike related extensions. Either link to a post you’ve created here, or offsite links to your own pages are welcome too.

List format is certainly one particular use of outlines – but perhaps unadorned outlines are the more general vanilla case ?

( Where bullets, numbering, or heading leavels of some flavour are wanted, writing more specialised Copy As or Save As scripts works well ).

I am at work, so just a short: Maybe “Autobullet”, when i do a dash and enter.

Perhaps an application of Bike stylesheets, which I think are being considered as a possible development ?

(The outline structure is always encoded as a consistent <ul><li> nest, so specialisation of any item runs could be encoded as attribute values.

Attributes, as you have probably noticed, are already accessible through the scripting API)