feat: inline code within link (#321)

* feat: inline code with link

* fix: decoration style
This commit is contained in:
winwin2011 2022-10-20 21:21:30 +08:00 committed by GitHub
parent 69e3ba6bed
commit 180ae206c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 4 deletions

View File

@ -26,7 +26,7 @@ export const marked = (markdownStr: string, blockParsers = blockElementParserLis
let matchedInlineParser = undefined;
let matchedIndex = -1;
for (const parser of inlineElementParserList) {
for (const parser of inlineParsers) {
if (parser.name === "plain text" && matchedInlineParser !== undefined) {
continue;
}

View File

@ -73,6 +73,18 @@ console.log("hello world!")
expect(unescape(marked(t.markdown))).toBe(t.want);
}
});
test("parse inline code within inline element", () => {
const tests = [
{
markdown: `Link: [\`baidu\`](https://baidu.com)`,
want: `<p>Link: <a class='link' target='_blank' rel='noreferrer' href='https://baidu.com'><code>baidu</code></a></p>`,
},
];
for (const t of tests) {
expect(unescape(marked(t.markdown))).toBe(t.want);
}
});
test("parse plain link", () => {
const tests = [
{

View File

@ -1,4 +1,8 @@
import { escape } from "lodash-es";
import Emphasis from "./Emphasis";
import Bold from "./Bold";
import { marked } from "..";
import InlineCode from "./InlineCode";
export const LINK_REG = /\[(.*?)\]\((.+?)\)/;
@ -7,8 +11,8 @@ const renderer = (rawStr: string): string => {
if (!matchResult) {
return rawStr;
}
return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[2])}'>${escape(matchResult[1])}</a>`;
const parsedContent = marked(matchResult[1], [], [InlineCode, Emphasis, Bold]);
return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[2])}'>${parsedContent}</a>`;
};
export default {

View File

@ -31,7 +31,10 @@
}
.link {
@apply text-blue-600 cursor-pointer underline break-all hover:opacity-80;
@apply text-blue-600 cursor-pointer underline break-all hover:opacity-80 decoration-1;
code {
@apply underline decoration-1;
}
}
.ol-block,