Éditeur WMD, Rails, Compass: Comment faire lire le code de démarque généré comme HTML et affiché comme «texte riche»?

Question

J'aime bien que WMD se comporte bien avec mon application. Cependant, j'ai un problème.

Fondamentalement, je modifie le contenu et je le stocke sous forme de marque dans ma base de données. Ensuite, j'utilise Kramdown Pour obtenir le HTML pour les vues. Cependant, Kramdown m'amène les balises HTML qui ne sont pas lues par mon navigateur. J'utilise Chrome.

L'assainissement lui donnera un texte brut même lorsque l'utilisateur est entré par exemple audacieux, italique, code, etc.

L'idée de base est donc d'obtenir la lecture HTML générée comme HTML et «Texte riche».

Inspectant la source de sortie, je trouve que si j'utilise Kramdown::Document.new(text).to_html Il y a des "" citations introduites comme ceci: "<p> ...<em>..</em>.. </p>"

Ces citations cachent le code vraiment html après les citations ... (je suppose)

Et avec désinfecter les citations ont disparu: <p> ...<em>..</em>.. </p> Mais je me retrouve avec du texte brut.

Qu'est-ce que j'oublie ici? Puis-je faire voir mon navigateur que j'ai audacieux, ou j'ai italique, un paragraphe, une image etc ...

Dois-je utiliser Kramdown ou Markdown similaire aux convertisseurs HMTL?

Merci beaucoup!

METTRE À JOUR

J'utilise la boussole pour mes feuilles de style. Lorsque Compass est désinstallé que l'éditeur WMD fonctionne bien et correctement. Pour certaines raisons, semble-t-il, Compass cache tous les styles, y compris le «Test Text» dans mon fichier Application.html.erb mais ceux créés avec ses fichiers Partials .SCSS! Je veux dire par exemple le code suivant lorsqu'il est écrit dans mon fichier application.html.erb ne s'affiche pas comme audacieux. <strong> test bold </strong>

Des idées pourquoi cela se produit?

Answer 1

J'ai compris la solution.

Le problème était que les styles de boussole générés comprennent le segment de code suivant:

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
}

Dans mes feuilles de style, j'avais ignoré pour inclure la classe .bp. Tout va bien maintenant ...