crates/ide/src/syntax_highlighting/html.rs

   1 //! Renders a bit of code as HTML.
   2
   3 use ide_db::base_db::SourceDatabase;
   4 use oorandom::Rand32;
   5 use stdx::format_to;
   6 use syntax::AstNode;
   7
   8 use crate::{syntax_highlighting::highlight, FileId, RootDatabase};
   9
  10 pub(crate) fn highlight_as_html(db: &RootDatabase, file_id: FileId, rainbow: bool) -> String {
  11     let parse = db.parse(file_id);
  12
  13     fn rainbowify(seed: u64) -> String {
  14         let mut rng = Rand32::new(seed);
  15         format!(
  16             "hsl({h},{s}%,{l}%)",
  17             h = rng.rand_range(0..361),
  18             s = rng.rand_range(42..99),
  19             l = rng.rand_range(40..91),
  20         )
  21     }
  22
  23     let hl_ranges = highlight(db, file_id, None, false);
  24     let text = parse.tree().syntax().to_string();
  25     let mut buf = String::new();
  26     buf.push_str(STYLE);
  27     buf.push_str("<pre><code>");
  28     for r in &hl_ranges {
  29         let chunk = html_escape(&text[r.range]);
  30         if r.highlight.is_empty() {
  31             format_to!(buf, "{}", chunk);
  32             continue;
  33         }
  34
  35         let class = r.highlight.to_string().replace('.', " ");
  36         let color = match (rainbow, r.binding_hash) {
  37             (true, Some(hash)) => {
  38                 format!(" data-binding-hash=\"{}\" style=\"color: {};\"", hash, rainbowify(hash))
  39             }
  40             _ => "".into(),
  41         };
  42         format_to!(buf, "<span class=\"{}\"{}>{}</span>", class, color, chunk);
  43     }
  44     buf.push_str("</code></pre>");
  45     buf
  46 }
  47
  48 //FIXME: like, real html escaping
  49 fn html_escape(text: &str) -> String {
  50     text.replace("<", "&lt;").replace(">", "&gt;")
  51 }
  52
  53 const STYLE: &str = "
  54 <style>
  55 body                { margin: 0; }
  56 pre                 { color: #DCDCCC; background: #3F3F3F; font-size: 22px; padding: 0.4em; }
  57
  58 .lifetime           { color: #DFAF8F; font-style: italic; }
  59 .label              { color: #DFAF8F; font-style: italic; }
  60 .comment            { color: #7F9F7F; }
  61 .documentation      { color: #629755; }
  62 .intra_doc_link     { font-style: italic; }
  63 .injected           { opacity: 0.65 ; }
  64 .struct, .enum      { color: #7CB8BB; }
  65 .enum_variant       { color: #BDE0F3; }
  66 .string_literal     { color: #CC9393; }
  67 .field              { color: #94BFF3; }
  68 .function           { color: #93E0E3; }
  69 .function.unsafe    { color: #BC8383; }
  70 .trait.unsafe       { color: #BC8383; }
  71 .operator.unsafe    { color: #BC8383; }
  72 .parameter          { color: #94BFF3; }
  73 .text               { color: #DCDCCC; }
  74 .type               { color: #7CB8BB; }
  75 .builtin_type       { color: #8CD0D3; }
  76 .type_param         { color: #DFAF8F; }
  77 .attribute          { color: #94BFF3; }
  78 .numeric_literal    { color: #BFEBBF; }
  79 .bool_literal       { color: #BFE6EB; }
  80 .macro              { color: #94BFF3; }
  81 .module             { color: #AFD8AF; }
  82 .value_param        { color: #DCDCCC; }
  83 .variable           { color: #DCDCCC; }
  84 .format_specifier   { color: #CC696B; }
  85 .mutable            { text-decoration: underline; }
  86 .escape_sequence    { color: #94BFF3; }
  87 .keyword            { color: #F0DFAF; font-weight: bold; }
  88 .keyword.unsafe     { color: #BC8383; font-weight: bold; }
  89 .control            { font-style: italic; }
  90 .reference          { font-style: italic; font-weight: bold; }
  91
  92 .unresolved_reference { color: #FC5555; text-decoration: wavy underline; }
  93 </style>
  94 ";