WMD-Editor, Schienen, Kompass:Wie kann der generierte Markdown-Code als HTML gelesen und als „Rich-Text“ angezeigt werden?

Question

Mir gefällt sehr, dass sich WMD gut mit meiner App verhält.Allerdings habe ich ein Problem.

Grundsätzlich bearbeite ich Inhalte und speichere sie als Markdown in meiner Datenbank.Dann benutze ich Kramdown um den HTML-Code für die Ansichten zu erhalten.Allerdings besorgt mir Kramdown die HTML-Tags, die von meinem Browser nicht gelesen werden.Ich verwende Chrome.

Durch die Bereinigung wird ein einfacher Text angezeigt, selbst wenn der Benutzer z. B. eingegeben hat.Fett, Kursiv, Code usw.

Die Grundidee besteht also darin, den generierten HTML-Code als HTML und als „Rich-Text“ lesen zu lassen.

Bei der Überprüfung der Ausgabequelle stelle ich fest, dass ich sie verwende Kramdown::Document.new(text).to_html Es gibt einige „ “-Zitate, die wie folgt eingeleitet werden: "<p> ...<em>..</em>.. </p>"

Diese Anführungszeichen verbergen den eigentlichen HTML-Code nach den Anführungszeichen ... (ich nehme an)

und mit sanitize sind die Anführungszeichen verschwunden: <p> ...<em>..</em>.. </p> aber am Ende habe ich Klartext.

Was fehlt mir hier?Kann ich meinem Browser anzeigen lassen, dass ich Fett- oder Kursivschrift, einen Absatz, ein Bild usw. habe?

Muss ich Kramdown oder ähnliche Markdown-zu-HTML-Konverter verwenden?

Vielen Dank!

AKTUALISIEREN

Ich verwende Compass für meine Stylesheets.Wenn Compass deinstalliert ist, funktioniert der WMD-Editor einwandfrei und korrekt.Aus bestimmten Gründen, so scheint es, versteckt Compass alle Stile, einschließlich „Testtext“, in meiner application.html.erb-Datei, aber diejenigen, die mit seinen .scss-Teildateien erstellt wurden!Ich meine zum Beispiel, dass der folgende Code nicht fett angezeigt wird, wenn er in meine Datei application.html.erb geschrieben wird. <strong> test bold </strong>

Irgendwelche Ideen, warum das passiert?

Answer 1

Ich habe die Lösung herausgefunden.

Das Problem bestand darin, dass die generierten Kompassstile das folgende Codesegment enthielten:

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box
}

In meinen Stylesheets hatte ich die Einbindung der .bp-Klasse ignoriert.Jetzt ist alles gut...