Wie analysiere ich eine kleine Teilmenge von Markdown in React-Komponenten?

9

Ich habe eine sehr kleine Teilmenge von Markdown zusammen mit einem benutzerdefinierten HTML-Code, den ich in React-Komponenten analysieren möchte. Zum Beispiel möchte ich diesen folgenden String drehen:

hello *asdf* *how* _are_ you !doing! today

In das folgende Array:

[ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ]

und geben Sie es dann von einer React-Renderfunktion zurück (React rendert das Array ordnungsgemäß als formatiertes HTML).

Grundsätzlich möchte ich Benutzern die Möglichkeit geben, einen sehr begrenzten Satz von Markdowns zu verwenden, um ihren Text in gestaltete Komponenten umzuwandeln (und in einigen Fällen meine eigenen Komponenten!).

Es ist unklug, gefährlich SetInnerHTML zu verwenden, und ich möchte keine externe Abhängigkeit einbringen, da sie alle sehr schwer sind und ich nur sehr grundlegende Funktionen benötige.

Ich mache gerade so etwas, aber es ist sehr spröde und funktioniert nicht in allen Fällen. Ich habe mich gefragt, ob es einen besseren Weg gibt:

function matchStrong(result, i) {
  let match = result[i].match(/(^|[^\\])\*(.*)\*/);
  if (match) { result[i] = <strong key={"ms" + i}>{match[2]}</strong>; }
  return match;
}

function matchItalics(result, i) {
  let match = result[i].match(/(^|[^\\])_(.*)_/); // Ignores \_asdf_ but not _asdf_
  if (match) { result[i] = <em key={"mi" + i}>{match[2]}</em>; }
  return match;
}

function matchCode(result, i) {
  let match = result[i].match(/(^|[^\\])```\n?([\s\S]+)\n?```/);
  if (match) { result[i] = <code key={"mc" + i}>{match[2]}</code>; }
  return match;
}

// Very brittle and inefficient
export function convertMarkdownToComponents(message) {
  let result = message.match(/(\\?([!*_`+-]{1,3})([\s\S]+?)\2)|\s|([^\\!*_`+-]+)/g);

  if (result == null) { return message; }

  for (let i = 0; i < result.length; i++) {
    if (matchCode(result, i)) { continue; }
    if (matchStrong(result, i)) { continue; }
    if (matchItalics(result, i)) { continue; }
  }

  return result;
}

Hier ist meine vorherige Frage , die zu dieser geführt hat.

Ryan Peschel
quelle
1
Was ist, wenn die Eingabe verschachtelte Elemente enthält font _italic *and bold* then only italic_ and normal? Was wäre das erwartete Ergebnis? Oder wird es niemals verschachtelt sein?
Trincot
1
Sie müssen sich keine Sorgen um das Verschachteln machen. Es ist nur ein sehr einfacher Abschlag für Benutzer. Was am einfachsten zu implementieren ist, passt zu mir. In Ihrem Beispiel wäre es völlig in Ordnung, wenn die innere Fettschrift nicht funktionieren würde. Aber wenn es einfacher ist, Verschachtelungen zu implementieren, als sie nicht zu haben, ist das auch in Ordnung.
Ryan Peschel
1
Es ist wahrscheinlich am einfachsten nur eine Off-the-shelf - Lösung wie zu verwenden npmjs.com/package/react-markdown-it
MB21
1
Ich benutze aber keinen Markdown. Es ist nur eine sehr ähnliche / kleine Teilmenge davon (die einige benutzerdefinierte Komponenten unterstützt, zusammen mit nicht verschachteltem Fettdruck, Kursivschrift, Code und Unterstreichung). Die Schnipsel, die ich gepostet habe, funktionieren etwas, scheinen aber nicht sehr ideal zu sein und scheitern in einigen trivialen Fällen (als ob Sie keinen einzigen Stern wie diesen eingeben könnten: asdf*ohne dass er verschwindet)
Ryan Peschel
1
Nun ... Markdown zu analysieren oder so etwas wie Markdown ist nicht gerade eine leichte Aufgabe ... Regexes schneiden es nicht ab ... Eine ähnliche Frage zu HTML finden Sie unter stackoverflow.com/questions/1732348/…
mb21

Antworten:

1

Wie es funktioniert?

Es funktioniert, indem ein String Stück für Stück gelesen wird, was möglicherweise nicht die beste Lösung für wirklich lange Strings ist.

Immer wenn der Parser feststellt, dass ein kritischer Block gelesen wird, d. H. '*' ein anderes Markdown-Tag, beginnt er mit dem Parsen von Blöcken dieses Elements, bis der Parser sein schließendes Tag findet.

Es funktioniert mit mehrzeiligen Zeichenfolgen, siehe zum Beispiel den Code.

Vorsichtsmaßnahmen

Sie haben nichts angegeben, oder ich hätte Ihre Anforderungen falsch verstehen können, wenn die Notwendigkeit besteht, fett und kursiv gedruckte Tags zu analysieren funktioniert meine aktuelle Lösung in diesem Fall möglicherweise nicht.

Wenn Sie jedoch mit den oben genannten Bedingungen arbeiten müssen, kommentieren Sie einfach hier und ich werde den Code optimieren.

Erstes Update: Optimiert die Behandlung von Markdown-Tags

Tags sind nicht mehr fest codiert, sondern eine Karte, die Sie problemlos erweitern können, um sie Ihren Anforderungen anzupassen.

Die Fehler, die Sie in den Kommentaren erwähnt haben, wurden behoben. Vielen Dank, dass Sie auf diese Probleme hingewiesen haben = p

Zweites Update: Markdown-Tags mit mehreren Längen

Der einfachste Weg, dies zu erreichen: Ersetzen von Zeichen mit mehreren Längen durch einen selten verwendeten Unicode

Obwohl die Methode parseMarkdownnoch keine Tags mit mehreren Längen unterstützt, können wir diese Tags mit mehreren Längen string.replace beim Senden unserer rawMarkdownRequisite problemlos durch einfache Tags ersetzen .

Um ein Beispiel dafür in der Praxis zu sehen, schauen Sie sich das an ReactDOM.render, das sich am Ende des Codes befindet.

Auch wenn Ihre Anwendung funktioniert Unterstützung mehrerer Sprachen, gibt es ungültige Unicode - Zeichen , dass JavaScript erkennt noch, ex .: "\uFFFF"kein gültiges Unicode, wenn ich mich richtig erinnere, aber JS noch in der Lage sein , sie zu vergleichen ("\uFFFF" === "\uFFFF" = true )

Auf den ersten Blick mag es hackig erscheinen, aber je nach Anwendungsfall sehe ich bei Verwendung dieser Route keine größeren Probleme.

Ein anderer Weg, dies zu erreichen

Nun, wir könnten leicht den letzten verfolgen N(woN der Länge des längsten Tags mit mehreren Längen entspricht).

Es müssten einige Änderungen am Verhalten der Schleife innerhalb der Methode vorgenommen werden parseMarkdown, dh es wird geprüft, ob der aktuelle Block Teil eines Tags mit mehreren Längen ist, wenn er als Tag verwendet wird. Andernfalls ``kmüssten wir es in Fällen wie markierennotMultiLength oder ähnlichem und diesen Teil als Inhalt verschieben.

Code

// Instead of creating hardcoded variables, we can make the code more extendable
// by storing all the possible tags we'll work with in a Map. Thus, creating
// more tags will not require additional logic in our code.
const tags = new Map(Object.entries({
  "*": "strong", // bold
  "!": "button", // action
  "_": "em", // emphasis
  "\uFFFF": "pre", // Just use a very unlikely to happen unicode character,
                   // We'll replace our multi-length symbols with that one.
}));
// Might be useful if we need to discover the symbol of a tag
const tagSymbols = new Map();
tags.forEach((v, k) => { tagSymbols.set(v, k ); })

const rawMarkdown = `
  This must be *bold*,

  This also must be *bo_ld*,

  this _entire block must be
  emphasized even if it's comprised of multiple lines_,

  This is an !action! it should be a button,

  \`\`\`
beep, boop, this is code
  \`\`\`

  This is an asterisk\\*
`;

class App extends React.Component {
  parseMarkdown(source) {
    let currentTag = "";
    let currentContent = "";

    const parsedMarkdown = [];

    // We create this variable to track possible escape characters, eg. "\"
    let before = "";

    const pushContent = (
      content,
      tagValue,
      props,
    ) => {
      let children = undefined;

      // There's the need to parse for empty lines
      if (content.indexOf("\n\n") >= 0) {
        let before = "";
        const contentJSX = [];

        let chunk = "";
        for (let i = 0; i < content.length; i++) {
          if (i !== 0) before = content[i - 1];

          chunk += content[i];

          if (before === "\n" && content[i] === "\n") {
            contentJSX.push(chunk);
            contentJSX.push(<br />);
            chunk = "";
          }

          if (chunk !== "" && i === content.length - 1) {
            contentJSX.push(chunk);
          }
        }

        children = contentJSX;
      } else {
        children = [content];
      }
      parsedMarkdown.push(React.createElement(tagValue, props, children))
    };

    for (let i = 0; i < source.length; i++) {
      const chunk = source[i];
      if (i !== 0) {
        before = source[i - 1];
      }

      // Does our current chunk needs to be treated as a escaped char?
      const escaped = before === "\\";

      // Detect if we need to start/finish parsing our tags

      // We are not parsing anything, however, that could change at current
      // chunk
      if (currentTag === "" && escaped === false) {
        // If our tags array has the chunk, this means a markdown tag has
        // just been found. We'll change our current state to reflect this.
        if (tags.has(chunk)) {
          currentTag = tags.get(chunk);

          // We have simple content to push
          if (currentContent !== "") {
            pushContent(currentContent, "span");
          }

          currentContent = "";
        }
      } else if (currentTag !== "" && escaped === false) {
        // We'll look if we can finish parsing our tag
        if (tags.has(chunk)) {
          const symbolValue = tags.get(chunk);

          // Just because the current chunk is a symbol it doesn't mean we
          // can already finish our currentTag.
          //
          // We'll need to see if the symbol's value corresponds to the
          // value of our currentTag. In case it does, we'll finish parsing it.
          if (symbolValue === currentTag) {
            pushContent(
              currentContent,
              currentTag,
              undefined, // you could pass props here
            );

            currentTag = "";
            currentContent = "";
          }
        }
      }

      // Increment our currentContent
      //
      // Ideally, we don't want our rendered markdown to contain any '\'
      // or undesired '*' or '_' or '!'.
      //
      // Users can still escape '*', '_', '!' by prefixing them with '\'
      if (tags.has(chunk) === false || escaped) {
        if (chunk !== "\\" || escaped) {
          currentContent += chunk;
        }
      }

      // In case an erroneous, i.e. unfinished tag, is present and the we've
      // reached the end of our source (rawMarkdown), we want to make sure
      // all our currentContent is pushed as a simple string
      if (currentContent !== "" && i === source.length - 1) {
        pushContent(
          currentContent,
          "span",
          undefined,
        );
      }
    }

    return parsedMarkdown;
  }

  render() {
    return (
      <div className="App">
        <div>{this.parseMarkdown(this.props.rawMarkdown)}</div>
      </div>
    );
  }
}

ReactDOM.render(<App rawMarkdown={rawMarkdown.replace(/```/g, "\uFFFF")} />, document.getElementById('app'));

Link zum Code (TypeScript) https://codepen.io/ludanin/pen/GRgNWPv

Link zum Code (Vanille / Babel) https://codepen.io/ludanin/pen/eYmBvXw

Lukas Danin
quelle
Ich bin der Meinung, dass diese Lösung auf dem richtigen Weg ist, aber es scheint Probleme zu geben, andere Markdown-Zeichen in andere zu integrieren. Zum Beispiel, versuchen Sie ersetzen This must be *bold*mit This must be *bo_ld*. Es führt dazu, dass der resultierende HTML-Code fehlerhaft ist
Ryan Peschel
Das Fehlen geeigneter Tests ergab dies = p, mein schlechtes. Ich behebe es bereits und werde das Ergebnis hier veröffentlichen. Es scheint ein einfaches Problem zu sein, das behoben werden muss.
Lukas Danin
Ja Danke. Ich mag diese Lösung wirklich. Es scheint sehr robust und sauber. Ich denke, es kann ein bisschen überarbeitet werden, um noch mehr Eleganz zu erzielen. Ich könnte versuchen, ein bisschen damit herumzuspielen.
Ryan Peschel
Übrigens, ich habe den Code optimiert, um eine viel flexiblere Methode zum Definieren von Markdown-Tags und ihren jeweiligen JSX-Werten zu unterstützen.
Lukas Danin
Hey danke das sieht toll aus. Nur eine letzte Sache und ich denke, es wird perfekt sein. In meinem ursprünglichen Beitrag habe ich auch eine Funktion für Code-Schnipsel (die dreifache Backticks beinhalten). Wäre es auch möglich, Unterstützung dafür zu haben? Damit die Tags optional aus mehreren Zeichen bestehen können? Eine andere Antwort fügte Unterstützung hinzu, indem Instanzen von `` `durch ein selten verwendetes Zeichen ersetzt wurden. Das wäre ein einfacher Weg, aber nicht sicher, ob das ideal ist.
Ryan Peschel
4

Es sieht so aus, als ob Sie nach einer kleinen, sehr einfachen Lösung suchen. Nicht "Super-Monster" wie react-markdown-it:)

Ich möchte Ihnen https://github.com/developit/snarkdown empfehlen, das ziemlich leicht und schön aussieht! Mit nur 1 KB und extrem einfach können Sie es verwenden und erweitern, wenn Sie andere Syntaxfunktionen benötigen.

Liste der unterstützten Tags https://github.com/developit/snarkdown/blob/master/src/index.js#L1

Aktualisieren

Gerade über Reaktionskomponenten bemerkt, habe es am Anfang verpasst. Ich glaube, das ist großartig für Sie. Nehmen Sie die Bibliothek als Beispiel und implementieren Sie Ihre benutzerdefinierten erforderlichen Komponenten, um dies zu erreichen, ohne HTML gefährlich festzulegen. Die Bibliothek ist ziemlich klein und klar. Viel Spass damit! :) :)

Alexandr Shurigin
quelle
3
var table = {
  "*":{
    "begin":"<strong>",
    "end":"</strong>"
    },
  "_":{
    "begin":"<em>",
    "end":"</em>"
    },
  "!":{
    "begin":"<MyComponent onClick={this.action}>",
    "end":"</MyComponent>"
    },

  };

var myMarkdown = "hello *asdf* *how* _are_ you !doing! today";
var tagFinder = /(?<item>(?<tag_begin>[*|!|_])(?<content>\w+)(?<tag_end>\k<tag_begin>))/gm;

//Use case 1: direct string replacement
var replaced = myMarkdown.replace(tagFinder, replacer);
function replacer(match, whole, tag_begin, content, tag_end, offset, string) {
  return table[tag_begin]["begin"] + content + table[tag_begin]["end"];
}
alert(replaced);

//Use case 2: React components
var pieces = [];
var lastMatchedPosition = 0;
myMarkdown.replace(tagFinder, breaker);
function breaker(match, whole, tag_begin, content, tag_end, offset, string) {
  var piece;
  if (lastMatchedPosition < offset)
  {
    piece = string.substring(lastMatchedPosition, offset);
    pieces.push("\"" + piece + "\"");
  }
  piece = table[tag_begin]["begin"] + content + table[tag_begin]["end"];
  pieces.push(piece);
  lastMatchedPosition = offset + match.length;

}
alert(pieces);

Das Ergebnis: Laufergebnis

Regexp-Testergebnis

Erläuterung:

/(?<item>(?<tag_begin>[*|!|_])(?<content>\w+)(?<tag_end>\k<tag_begin>))/
  • In diesem Abschnitt können Sie Ihre Tags definieren: [*|!|_]Sobald eines davon übereinstimmt, wird es als Gruppe erfasst und als "tag_begin" bezeichnet.

  • Und (?<content>\w+)erfasst dann den vom Tag umschlossenen Inhalt.

  • Das End-Tag muss mit dem zuvor übereinstimmenden Tag identisch sein. \k<tag_begin>Wenn es den Test bestanden hat, erfassen Sie es als Gruppe und geben Sie ihm den Namen "tag_end" (?<tag_end>\k<tag_begin>)).

In der JS haben Sie eine Tabelle wie folgt eingerichtet:

var table = {
  "*":{
    "begin":"<strong>",
    "end":"</strong>"
    },
  "_":{
    "begin":"<em>",
    "end":"</em>"
    },
  "!":{
    "begin":"<MyComponent onClick={this.action}>",
    "end":"</MyComponent>"
    },

  };

Verwenden Sie diese Tabelle, um die übereinstimmenden Tags zu ersetzen.

Sting.replace hat eine Überladung String.replace (regulärer Ausdruck, Funktion) , die erfasste Gruppen als Parameter verwenden kann. Wir verwenden diese erfassten Elemente, um die Tabelle und die ersetzende Zeichenfolge zu generieren.

[Update]
Ich habe den Code aktualisiert. Ich habe den ersten beibehalten, falls jemand anderes keine Reaktionskomponenten benötigt, und Sie können sehen, dass es kaum einen Unterschied zwischen ihnen gibt. Komponenten reagieren

Simon
quelle
Leider bin ich mir nicht sicher, ob das funktioniert. Weil ich die eigentlichen React-Komponenten und -Elemente selbst brauche, keine Strings davon. Wenn Sie in meinen ursprünglichen Beitrag schauen, werden Sie sehen, dass ich die tatsächlichen Elemente selbst zu einem Array hinzufüge, nicht zu Zeichenfolgen. Die gefährliche Verwendung von SetInnerHTML ist gefährlich, da der Benutzer schädliche Zeichenfolgen eingeben kann.
Ryan Peschel
Glücklicherweise ist es sehr einfach, den String-Ersatz in React-Komponenten zu konvertieren. Ich habe den Code aktualisiert.
Simon
Hm? Mir muss etwas fehlen, denn es sind immer noch Fäden an meinem Ende. Ich habe sogar mit Ihrem Code herumgespielt. Wenn Sie die console.logAusgabe lesen, werden Sie sehen, dass das Array voller Zeichenfolgen ist, nicht der tatsächlichen React-Komponenten: jsfiddle.net/xftswh41
Ryan Peschel
Ehrlich gesagt kenne ich React nicht, daher kann ich nicht alles perfekt auf Ihre Bedürfnisse abstimmen, aber ich denke, die Informationen zur Lösung Ihrer Frage reichen aus. Sie müssen sie auf Ihre React-Maschine übertragen, und es kann einfach gehen.
Simon
Der Grund, warum dieser Thread existiert, liegt darin, dass es erheblich schwieriger zu sein scheint, sie in React-Komponenten zu analysieren (daher der Thread-Titel, der genau diesen Bedarf angibt). Das Parsen in Zeichenfolgen ist ziemlich trivial und Sie können einfach die Funktion zum Ersetzen von Zeichenfolgen verwenden. Die Zeichenfolgen sind keine ideale Lösung, da sie langsam und anfällig für XSS sind, da sie gefährlich eingestellt werden müssen. SetInnerHTML
Ryan Peschel
0

Sie können es so machen:

//inside your compoenet

   mapData(myMarkdown){
    return myMarkdown.split(' ').map((w)=>{

        if(w.startsWith('*') && w.endsWith('*') && w.length>=3){
           w=w.substr(1,w.length-2);
           w=<strong>{w}</strong>;
         }else{
             if(w.startsWith('_') && w.endsWith('_') && w.length>=3){
                w=w.substr(1,w.length-2);
                w=<em>{w}</em>;
              }else{
                if(w.startsWith('!') && w.endsWith('!') && w.length>=3){
                w=w.substr(1,w.length-2);
                w=<YourComponent onClick={this.action}>{w}</YourComponent>;
                }
            }
         }
       return w;
    })

}


 render(){
   let content=this.mapData('hello *asdf* *how* _are_ you !doing! today');
    return {content};
  }
Jatin Parmar
quelle
0

A working solution purely using Javascript and ReactJs without dangerouslySetInnerHTML.

Ansatz

Zeichenweise Suche nach den Markdown-Elementen. Sobald eines gefunden wird, suchen Sie nach dem Ending-Tag für dasselbe und konvertieren Sie es dann in HTML.

Im Snippet unterstützte Tags

  • Fett gedruckt
  • Kursivschrift
  • em
  • Vor

Eingabe und Ausgabe von Snippet:

JsFiddle: https://jsfiddle.net/sunil12738/wg7emcz1/58/

Code:

const preTag = "đ"
const map = {
      "*": "b",
      "!": "i",
      "_": "em",
      [preTag]: "pre"
    }

class App extends React.Component {
    constructor(){
      super()
      this.getData = this.getData.bind(this)
    }

    state = {
      data: []
    }
    getData() {
      let str = document.getElementById("ta1").value
      //If any tag contains more than one char, replace it with some char which is less frequently used and use it
      str = str.replace(/```/gi, preTag)
      const tempArr = []
      const tagsArr = Object.keys(map)
      let strIndexOf = 0;
      for (let i = 0; i < str.length; ++i) {
        strIndexOf = tagsArr.indexOf(str[i])
        if (strIndexOf >= 0 && str[i-1] !== "\\") {
          tempArr.push(str.substring(0, i).split("\\").join("").split(preTag).join(""))
          str = str.substr(i + 1);
          i = 0;
          for (let j = 0; j < str.length; ++j) {
            strIndexOf = tagsArr.indexOf(str[j])
            if (strIndexOf >= 0 && str[j-1] !== "\\") {
              const Tag = map[str[j]];
              tempArr.push(<Tag>{str.substring(0, j).split("\\").join("")}</Tag>)
              str = str.substr(j + 1);
              i = 0;
              break
             }
          }
        }
      }
      tempArr.push(str.split("\\").join(""))
      this.setState({
        data: tempArr,
      })
    }
    render() {
      return (
        <div>
          <textarea rows = "10"
            cols = "40"
           id = "ta1"
          /><br/>
          <button onClick={this.getData}>Render it</button><br/> 
          {this.state.data.map(x => x)} 
        </div>
      )
    }
  }

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
  <div id="root"></div>
</body>

Detaillierte Erklärung (mit Beispiel):

Angenommen, Zeichenfolge ist How are *you* doing? Behalten Sie eine Zuordnung für Symbole zu Tags bei

map = {
 "*": "b"
}
  • Schleife, bis Sie zuerst * finden, Text davor ist normale Zeichenfolge
  • Schieben Sie das innere Array. Array wird ["How are "]und startet die innere Schleife, bis Sie das nächste * finden.
  • Now next between * and * needs to be boldWir konvertieren sie in ein HTML-Element per Text und schieben das Array mit Tag = b direkt in die Karte. Wenn Sie dies tun <Tag>text</Tag>, reagieren Sie intern in Text konvertieren und in Array verschieben. Jetzt ist Array ["wie geht es", Sie ]. Pause von der inneren Schleife
  • Jetzt starten wir die äußere Schleife von dort und es werden keine Tags gefunden. Drücken Sie also, um im Array zu bleiben. Array wird: ["wie geht es", Sie , "tun"].
  • Auf der Benutzeroberfläche rendern How are <b>you</b> doing?
    Note: <b>you</b> is html and not text

Hinweis : Eine Verschachtelung ist ebenfalls möglich. Wir müssen die obige Logik in Rekursion aufrufen

Unterstützung für das Hinzufügen neuer Tags

  • Wenn sie ein Zeichen wie * oder! Sind, fügen Sie sie in ein mapObjekt mit dem Schlüssel als Zeichen und dem Wert als entsprechendes Tag ein
  • Wenn es sich um mehr als ein Zeichen handelt, z. B. `` `, erstellen Sie eine Eins-zu-Eins-Zuordnung mit einem weniger häufig verwendeten Zeichen und fügen Sie es dann ein (Grund: Derzeit basiert die Annäherung an die Suche nach Zeichen nach Zeichen, sodass mehr als ein Zeichen unterbrochen wird , das kann auch durch Verbesserung der Logik behoben werden)

Unterstützt es das Verschachteln? Nein
Unterstützt es alle von OP genannten Anwendungsfälle? Ja

Ich hoffe es hilft.

Sunil Chaudhary
quelle
Hallo, schau dir das jetzt an. Ist dies auch mit Triple-Backtick-Unterstützung möglich? Also würde `` `asdf``` auch für Codeblöcke funktionieren?
Ryan Peschel
Es werden jedoch möglicherweise einige Änderungen erforderlich sein. Derzeit gibt es für * oder! Nur eine Einzelzeichenübereinstimmung. Das muss ein wenig geändert werden. Codeblöcke bedeuten asdfim Grunde, dass sie <pre>asdf</pre>mit dunklem Hintergrund gerendert werden , oder? Lass es mich wissen und ich werde sehen. Sogar Sie können es jetzt versuchen. Ein einfacher Ansatz ist: Ersetzen Sie in der obigen Lösung das `` `im Text durch ein Sonderzeichen wie ^ oder ~ und ordnen Sie es dem Pre-Tag zu. Dann wird es gut funktionieren. Andere Ansätze erfordern etwas mehr Arbeit
Sunil Chaudhary
Ja, genau, ersetzen Sie `` `asdf``` durch <pre>asdf</pre>. Vielen Dank!
Ryan Peschel
@ RyanPeschel Hallo! Habe auch die preTag-Unterstützung hinzugefügt . Lassen Sie mich wissen, ob es funktioniert
Sunil Chaudhary
Interessante Lösung (mit dem seltenen Zeichen). Ein Problem, das ich immer noch sehe, ist der Mangel an Unterstützung für das Entkommen (so dass \ * asdf * nicht fett gedruckt ist), für das ich Unterstützung in den Code in meinem ursprünglichen Beitrag aufgenommen habe (der auch in meiner verlinkten Ausarbeitung am Ende des Berichts erwähnt wurde Post). Wäre das sehr schwer hinzuzufügen?
Ryan Peschel