![\"marketplace\"](\"https://static.ghost.org/v1.0.0/images/marketplace.jpg\")
Creating a totally custom design for your publication
\nGhost comes with a beautiful default theme called Casper, which is designed to be a clean, readable publication layout and can be easily adapted for most purposes. However, Ghost can also be completely themed to suit your needs. Rather than just giving you a few basic settings which act as a poor proxy for code, we just let you write code.
\nThere are a huge range of both free and premium pre-built themes which you can get from the Ghost Theme Marketplace, or you can simply create your own from scratch.
\n
\n\nAnyone can write a completely custom Ghost theme, with just some solid knowledge of HTML and CSS
\n
Ghost themes are written with a templating language called handlebars, which has a bunch of dynamic helpers to insert your data into template files. Like {{author.name}}, for example, outputs the name of the current author.
The best way to learn how to write your own Ghost theme is to have a look at the source code for Casper, which is heavily commented and should give you a sense of how everything fits together.
\ndefault.hbs is the main template file, all contexts will load inside this file unless specifically told to use a different template.post.hbs is the file used in the context of viewing a post.index.hbs is the file used in the context of viewing the home page.We've got full and extensive theme documentation which outlines every template file, context and helper that you can use.
\nIf you want to chat with other people making Ghost themes to get any advice or help, there's also a themes section on our public Ghost forum.
", "amp": "1", "plaintext": "Creating a totally custom design for your publication\n\nGhost comes with a beautiful default theme called Casper, which is designed to\nbe a clean, readable publication layout and can be easily adapted for most\npurposes. However, Ghost can also be completely themed to suit your needs.\nRather than just giving you a few basic settings which act as a poor proxy for\ncode, we just let you write code.\n\nThere are a huge range of both free and premium pre-built themes which you can\nget from the Ghost Theme Marketplace [https://ghost.org/marketplace/], or you can\nsimply create your own from scratch.\n\n [https://ghost.org/marketplace/]\n\nAnyone can write a completely custom Ghost theme, with just some solid knowledge\nof HTML and CSS\n\nGhost themes are written with a templating language called handlebars, which has\na bunch of dynamic helpers to insert your data into template files. Like \n{{author.name}}, for example, outputs the name of the current author.\n\nThe best way to learn how to write your own Ghost theme is to have a look at \nthe\nsource code for Casper [https://github.com/TryGhost/Casper], which is heavily\ncommented and should give you a sense of how everything fits together.\n\n * default.hbs is the main template file, all contexts will load inside this\n file unless specifically told to use a different template.\n * post.hbs is the file used in the context of viewing a post.\n * index.hbs is the file used in the context of viewing the home page.\n * and so on\n\nWe've got full and extensive theme documentation\n[https://ghost.org/docs/themes/] which outlines every template file,\ncontext and helper that you can use.\n\nIf you want to chat with other people making Ghost themes to get any advice or\nhelp, there's also a themes category on our public Ghost forum\n[https://forum.ghost.org/c/themes].", "feature_image": "https://static.ghost.org/v1.0.0/images/design.jpg", "featured": 0, "page": 0, "status": "published", "locale": null, "visibility": "public", "meta_title": null, "meta_description": null, "author_id": "5951f5fca366002ebd5dbef7", "created_at": "2017-09-01T12:29:50.000Z", "created_by": "5951f5fca366002ebd5dbef7", "updated_at": "2017-09-01T12:29:50.000Z", "updated_by": "5951f5fca366002ebd5dbef7", "published_at": "2017-09-01T12:29:50.000Z", "published_by": "5951f5fca366002ebd5dbef7", "custom_excerpt": null, "codeinjection_head": null, "codeinjection_foot": null, "og_image": null, "og_title": null, "og_description": null, "twitter_image": null, "twitter_title": null, "twitter_description": null }, { "id": "59a952be7d79ed06b0d21128", "uuid": "8a6fdc10-fcde-48ba-b662-4d366cef5653", "title": "Advanced Markdown tips", "slug": "advanced-markdown", "mobiledoc": "{\"version\":\"0.3.1\",\"markups\":[],\"atoms\":[],\"cards\":[[\"markdown\",{\"markdown\":\"There are lots of powerful things you can do with the Ghost editor\\n\\nIf you've gotten pretty comfortable with [all the basics](/the-editor/) of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown!\\n\\nAs with the last post about the editor, you'll want to be actually editing this post as you read it so that you can see all the Markdown code we're using.\\n\\n\\n## Special formatting\\n\\nAs well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example:\\n\\n+ ~~strike through~~\\n+ ==highlight==\\n+ \\\\*escaped characters\\\\*\\n\\n\\n## Writing code blocks\\n\\nThere are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, `like this`. Larger snippets of code can be displayed across multiple lines using triple back ticks:\\n\\n```\\n.my-link {\\n text-decoration: underline;\\n}\\n```\\n\\nIf you want to get really fancy, you can even add syntax highlighting using [Prism.js](http://prismjs.com/).\\n\\n\\n## Full bleed images\\n\\nOne neat trick which you can use in Markdown to distinguish between different types of images is to add a `#hash` value to the end of the source URL, and then target images containing the hash with special styling. For example:\\n\\n\\n\\nwhich is styled with...\\n\\n```\\nimg[src$=\\\"#full\\\"] {\\n max-width: 100vw;\\n}\\n```\\n\\nThis creates full-bleed images in the Casper theme, which stretch beyond their usual boundaries right up to the edge of the window. Every theme handles these types of things slightly differently, but it's a great trick to play with if you want to have a variety of image sizes and styles.\\n\\n\\n## Reference lists\\n\\n**The quick brown [fox][1], jumped over the lazy [dog][2].**\\n\\n[1]: https://en.wikipedia.org/wiki/Fox \\\"Wikipedia: Fox\\\"\\n[2]: https://en.wikipedia.org/wiki/Dog \\\"Wikipedia: Dog\\\"\\n\\nAnother way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference.\\n\\n\\n## Creating footnotes\\n\\nThe quick brown fox[^1] jumped over the lazy dog[^2].\\n\\n[^1]: Foxes are red\\n[^2]: Dogs are usually not red\\n\\nFootnotes are a great way to add additional contextual details when appropriate. Ghost will automatically add footnote content to the very end of your post.\\n\\n\\n## Full HTML\\n\\nPerhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Ghost editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example:\\n\\n\\n\"}]],\"sections\":[[10,0]]}", "html": "There are lots of powerful things you can do with the Ghost editor
\nIf you've gotten pretty comfortable with all the basics of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown!
\nAs with the last post about the editor, you'll want to be actually editing this post as you read it so that you can see all the Markdown code we're using.
\nAs well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example:
\nThere are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, like this. Larger snippets of code can be displayed across multiple lines using triple back ticks:
.my-link {\n text-decoration: underline;\n}\nIf you want to get really fancy, you can even add syntax highlighting using Prism.js.
\nOne neat trick which you can use in Markdown to distinguish between different types of images is to add a #hash value to the end of the source URL, and then target images containing the hash with special styling. For example:
![\"walking\"](\"https://static.ghost.org/v1.0.0/images/walking.jpg#full\")
which is styled with...
\nimg[src$="#full"] {\n max-width: 100vw;\n}\nThis creates full-bleed images in the Casper theme, which stretch beyond their usual boundaries right up to the edge of the window. Every theme handles these types of things slightly differently, but it's a great trick to play with if you want to have a variety of image sizes and styles.
\nThe quick brown fox, jumped over the lazy dog.
\nAnother way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference.
\nThe quick brown fox[1] jumped over the lazy dog[2].
\nFootnotes are a great way to add additional contextual details when appropriate. Ghost will automatically add footnote content to the very end of your post.
\nPerhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Ghost editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example:
\n\n