{"type_of":"article","id":604449,"title":"How to view the raw markdown of a dev.to post","description":"Sometimes on dev.to, you might come across an article that uses some interesting markdown or liquid...","readable_publish_date":"Feb 15 '21","slug":"how-to-view-the-raw-markdown-of-a-dev-to-post-391b","path":"/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b","url":"https://dev.to/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b","comments_count":3,"public_reactions_count":18,"collection_id":null,"published_timestamp":"2021-02-15T13:20:51Z","language":"en","subforem_id":null,"positive_reactions_count":18,"cover_image":null,"social_image":"https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fatgn2ze6imf0zqadmrc9.png","canonical_url":"https://dev.to/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b","created_at":"2021-02-15T13:20:51Z","edited_at":"2021-07-12T11:51:33Z","crossposted_at":null,"published_at":"2021-02-15T13:20:51Z","last_comment_at":"2023-10-28T05:18:42Z","reading_time_minutes":1,"tag_list":"markdown, meta","tags":["markdown","meta"],"body_html":"\u003cp\u003eSometimes on dev.to, you might come across an article that uses some interesting markdown or \u003ca href=\"https://docs.dev.to/frontend/liquid-tags/\"\u003eliquid tags\u003c/a\u003e and wonder how it was created. Well, wonder no more!\u003c/p\u003e\n\n\u003cp\u003edev.to is built on top of the forem software, which has a \u003ca href=\"https://docs.forem.com/api/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ewell-documented API\u003c/a\u003e. Each path is resolved relative to \u003ccode\u003ehttps://dev.to/api\u003c/code\u003e, so to get information about an article, all you need to do is add \u003ca href=\"https://docs.forem.com/api/#operation/getArticleByPath\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003ccode\u003e/api/articles\u003c/code\u003e\u003c/a\u003e in front of the pathname (username and slug).\u003c/p\u003e\n\n\u003cp\u003eFor example, information about this article can be found here:\u003cbr\u003e\n\u003ca href=\"https://dev.to/api/articles/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b\"\u003ehttps://dev.to/api/articles/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eThe raw markdown can be found under the \u003ccode\u003ebody_markdown\u003c/code\u003e field.\u003c/p\u003e\n\n\u003cp\u003eAlternatively, here’s a browser console-friendly snippet:\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight javascript\"\u003e\u003ccode\u003e\u003cspan class=\"p\"\u003e;(\u003c/span\u003e\u003cspan class=\"k\"\u003easync \u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"k\"\u003enew\u003c/span\u003e \u003cspan class=\"nc\"\u003eURL\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nb\"\u003ewindow\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elocation\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epathname\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003e/api/articles\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epathname\u003c/span\u003e\n\n    \u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eres\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"k\"\u003eawait\u003c/span\u003e \u003cspan class=\"nf\"\u003efetch\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003econst\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003ebody_markdown\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"k\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eres\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nf\"\u003ejson\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\n\n    \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nf\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ebody_markdown\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})()\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\n\n","body_markdown":"Sometimes on dev.to, you might come across an article that uses some interesting markdown or [liquid tags](https://docs.dev.to/frontend/liquid-tags/) and wonder how it was created. Well, wonder no more!\n\ndev.to is built on top of the forem software, which has a [well-documented API](https://docs.forem.com/api/). Each path is resolved relative to `https://dev.to/api`, so to get information about an article, all you need to do is add [`/api/articles`](https://docs.forem.com/api/#operation/getArticleByPath) in front of the pathname (username and slug).\n\nFor example, information about this article can be found here:\nhttps://dev.to/api/articles/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b\n\nThe raw markdown can be found under the `body_markdown` field.\n \nAlternatively, here’s a browser console-friendly snippet:\n\n```js\n;(async () =\u003e {\n    const url = new URL(window.location)\n    url.pathname = '/api/articles' + url.pathname\n \n    const res = await fetch(url)\n    const { body_markdown } = await res.json()\n \n    console.log(body_markdown)\n})()\n```\n","user":{"name":"lionel-rowe","username":"lionelrowe","twitter_username":null,"github_username":"lionel-rowe","user_id":169338,"website_url":null,"profile_image":"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F169338%2F1b23b783-9452-493b-adbb-6e4aff12ad7c.jpeg","profile_image_90":"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F169338%2F1b23b783-9452-493b-adbb-6e4aff12ad7c.jpeg"}}