Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Blogger] Every text boxes don't work well #89

Closed
ghost opened this issue Jul 25, 2013 · 6 comments
Closed

[Blogger] Every text boxes don't work well #89

ghost opened this issue Jul 25, 2013 · 6 comments
Labels
Milestone

Comments

@ghost
Copy link

ghost commented Jul 25, 2013

In Chrome, when I write some text in Blogger, for example,

'''csharp
using System;
namespace NameSpace
{
    ...
}
```

is converted like this:

using System;

namespace NameSpace

{

    ...

} 

When I push 'Preview' button, it becomes like:

using System;
namespace NameSpace
{
 ...
}

I don't know whether this is Markdown Here's bug or Blogger's bug.
But when I pasted a valid HTML into Blogger's editer, that is converted in 'Try it out...' (in http://markdown-here.com/) from same Markdown , everythings works very well.
The problem only happens when I converted that directly in Blogger's editor.

Here is the screenshot.
snapcrab_noname_2013-7-25_15-40-29_no-00
snapcrab_noname_2013-7-25_15-40-11_no-00
snapcrab_noname_2013-7-25_15-39-51_no-00

@adam-p
Copy link
Owner

adam-p commented Aug 8, 2013

Thanks for discovering that Markdown Here sort of works on Blogger (ありがとう!). I'll add this info to the Compatibility wiki page. (Tomorrow. Pretty tired now.)

But yes, I see that line breaks are messed up. Viewing the page elements shows that the Blogger editor is inserting a <p> element every time you hit Enter. You can see my test blog post here.

So raw code Markdown looks like this in the Blogger editor:

<p>```python</p>
<p>n = 33</p>
<p>s = "hello"</p>
<p>```</p>

But it looks like this in the Gmail editor:

```python
<div>n = 33</div>
<div>s = "hello"</div>
<div>```</div>
<div>

Markdown Here interprets <p> elements differently from <div> elements -- basically one MD newline vs. two. (By "interpret" I really mean "converts the raw-MD-in-HTML to plaintext-MD before rendering.)

One possible fix is simply to start interpreting/processing <p> like <div>. Might be fine. (Or it might break stuff. Will have to test a lot.)

Another fix would be to add site-specific HTML-to-plaintext processing (and probably site-specific MD-to-HTML rendering). I've had this on my mind for a while, as it could help with Evernote, Wordpress, etc. compatibility. But it'll be a lot of work.

@adam-p
Copy link
Owner

adam-p commented Aug 8, 2013

I forgot to comment on the other part of this problem: The code block styling looks fine when you're writing the blog post (after rendering), but it's messed up in the final post (and the preview). See @lambdalice's screenshot above. (And the test post I linked to in the previous comment.)

The problem seems to be with the <code> element being display: inline vs. display: block. For example, if you remove this style from the code rule in your Primary Styling CSS (in the MDH options):

  display: inline; /* adam-p: added to fix Yahoo block display */

Then the code block in the final post looks correct.

I guess this is an argument for completely different per-site rendering? Like, with different CSS and everything? Ugh. But otherwise we break Yahoo to fix Blogger? Ugh.

@treyharris
Copy link

I just discovered the same issue, Googled, and landed here--funny coincidence that it's just being discussed now.

I've been looking for a blogging platform that will support Markdown Here code blocks. Squarespace also fails, but it's definitely Squarespace's implementation of rich text blocks--they don't support <p>-less newlines, so if you try something like:

```haskell
module Foo where
foo :: Int
foo = 3
```

you get the exact same spacing between the module and the foo :: Int lines that you get between the two foo lines. Doubling up on blank lines sort-of works, except then the entire code block is way too widely spaced. Yuck.

So Blogger was my next try, and from the preview it looked perfect! But as you can see here, I got the same results as lambdalice--each line became a separate code block.

Since Wordpress also does not work sufficiently well for code-oriented blogs, is there a known blogging system that does work correctly? (One that uses Markdown with the ```lang syntax highlighting would be okay, too.)

@adam-p
Copy link
Owner

adam-p commented Aug 8, 2013

To unsatisfactorily answer your question about blogs that MDH works properly with: Dunno. Maybe someone else here knows? You can/should also ask in the MDH GGroup: https://groups.google.com/forum/#!forum/markdown-here

I'll try out the easier fix for this sooner rather than later.

adam-p added a commit that referenced this issue Oct 1, 2013
…re, and interfered with code block rendering on Blogger (see issue #89). Added current URL to an attribute on the wrapper so that site-specific styles can be added.
@adam-p
Copy link
Owner

adam-p commented Oct 2, 2013

Blogger behaviour is greatly improved now. Here's an example post, that didn't require special styles or Shift+Enter or anything: http://adampersand.blogspot.ca/2013/10/mdh-test-better-blogger.html

Here are the revs that fix it: be739db a0c7d45

This will be in the next release.

I'm going to close this issue. If there are problems after the next release, please re-open it or create a new one.

@adam-p adam-p closed this as completed Oct 2, 2013
@ghost
Copy link
Author

ghost commented Oct 3, 2013

It works very well. Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants