Home → Extras (Style Sheets, etc.) →

Myword Style

• Edit

loeffler

14 Feb, 2013 03:01 PM

Myword.style emphasizes the text and makes markdown a subdued gray. it is based on Byword.css file by Brett Terpstra for Marked.app.

• Myword.style 7.91 KB

1. 1 Posted by tsvoronos on 09 Feb, 2015 06:36 PM

   

   I apologize for the very simple question, but is there a way to tweak this so that images autofit into the preview window? I can't seem to figure out how to make this happen.

   • Edit

2. 2 Posted by loeffler on 18 Feb, 2015 07:17 PM

   

   I thought it was going to be easy but it's not. I am working on it.

   • Edit

3. Support Staff 3 Posted by Fletcher on 18 Feb, 2015 08:25 PM

   

   It's not hard. The CSS just needs to include

   img {width:100%}
   

   and possibly:

   figure {width:100%}
   

   depending on exactly what you want and your other CSS.

   • Edit

4. Fletcher closed this discussion on 18 Feb, 2015 08:25 PM.

5. tsvoronos re-opened this discussion on 18 Feb, 2015 08:30 PM

6. 4 Posted by tsvoronos on 18 Feb, 2015 08:30 PM

   

   The problem is the #wrapper references in your css which MMD composer rejects.

   http://support.multimarkdown.com/discussions/extras-style-sheets-etc/32569-auto-fitting-images

   Sent from my iPhone

   • Edit

7. Support Staff 5 Posted by Fletcher on 18 Feb, 2015 09:19 PM

   

   Composer doesn't "reject" them. Unless you put in a

   there's nothing for them to operate on.

   My point still stands -- if you want images to fill the preview window, use what I wrote above. It works (I just did it).

   If you are using CSS that adds in a bunch of stuff that breaks things, I can't help that. Clean up the CSS and remove the extraneous stuff. ;)

   But when I tested just now, it works. Including with the Myword style in 2.8 and converted to a theme for 3.0.

   • Edit

8. 6 Posted by tsvoronos on 18 Feb, 2015 09:22 PM

   

   Got it, sorry to both for the misinformation!

   Teddy

   • Edit

9. Support Staff 7 Posted by Fletcher on 18 Feb, 2015 09:36 PM

   

   (oops the <div class="wrapper"> got filtered out from my last message.

   • Edit

10. 8 Posted by loeffler on 20 Feb, 2015 01:55 AM

    

    Fletcher,

    I have reviewed the MyWord.style and have made some modifications. The CSS now scales large images and properly centers them. There were a couple of things I needed to change. This is an example HTML file <https://dl.dropboxusercontent.com/u/12643381/Test%20of%20Full%20Size.html>. It accesses a large image file that is rescaled as you change the width of the window. It also describes the changes I had to make to the CSS in the style file.

    The new MyWord.style file <https://dl.dropboxusercontent.com/u/12643381/Myword.style> works but WARNING - is consumes a lot of resources if there is a live preview in MultiMarkdown Composer of a large image. If you modify the MultiMarkdown file <https://dl.dropboxusercontent.com/u/12643381/Test%20of%20Full%20Size.md> used for testing you'll see just how slow the refresh is because it appears the large image is resized for display with each new character.

    I tested the HTML file on Safari and Chromium. I also tried to display in Marked 2 and inspected the HTML produced which has, as you stated, the <div class="wrapped"> ...</div> is inserted.

    My normal mode of operation is create a scaled down image file that I display on the page and link it to the full size image.

    Dave

    • Edit

11. Support Staff 9 Posted by Fletcher on 20 Feb, 2015 12:59 PM

    

    Dave,

    Thanks for the description.

    And yes, a long/large/complex preview will require more resources, even without this theme. Composer v3 works in a slightly different way to try and further minimize the impact of complex previews on the editing pane's responsiveness. But at some point, you need a faster computer if you want it to do more work in less time.

    In the case of documents like this, my recommendation is to set the preview to only refresh when the document is saved. This will improve the responsiveness while typing between saves.

    The other thing that helps HTML in general is to use width and height attributes for images. This allows the page to be properly laid out, even before the image is loaded. I realize that this is not compatible with the concept of wanting your image to adjust width to fit the available preview.

    This is a perfect example of why "one size does not fit all." The "proper" theme for a given document can depend on many factors, which is why Composer gives you the tools you need to adjust it's behavior as needed. ;)

    • Edit

12. 10 Posted by Danielle on 24 Feb, 2015 12:32 PM

    

    Hi, Do you know if i can customize this template so it's media wiki compliant. in that:

    = heading 1= == heading 2 == * bullet

    numbered list

    2nd item

    ; term for def list : definition

    '''bolds text''' ''italicizes ''

    thanks for your time.
    Best, Danielle

    • Edit

13. Support Staff 11 Posted by Fletcher on 24 Feb, 2015 12:41 PM

    

    1) MultiMarkdown Composer is designed to handle, strange as it may seem, MultiMarkdown (and "regular" Markdown).

    The MediaWiki syntax is not Markdown.

    2) These style sheets (now themes) are designed for modifying the appearance of the MultiMarkdown Composer editor. They don't change the underlying behavior of the application, just the appearance.

    Pandoc seems to have some MediaWiki support. It may be possible to interconvert between Markdown (with some extensions) and MediaWiki syntax. Though it's not quite clear to me why that would be particularly useful.

    • Edit

14. 12 Posted by loeffler on 25 Feb, 2015 05:14 PM

    

    This is the newest Myword.style for MultiMarkdown Composer 2. It is modeled on Brett's Byword css file for Marked. It has been modified to properly resize large images to fit in the preview's width.

    Enjoy,
    David

    • Myword.style 8.01 KB
    • Edit