インラインコードを実装

src/common/text/elements/inline-code.js

@@ -0,0 +1,14 @@
+/**
+ * Code (inline)
+ */
+
+module.exports = text => {
+	const match = text.match(/^`(.+?)`/);
+	if (!match) return null;
+	const code = match[0];
+	return {
+		type: 'inline-code',
+		content: code,
+		code: code.substr(1, code.length - 2).trim()
+	};
+};

src/common/text/index.js

@@ -7,7 +7,8 @@ const elements = [
 	require('./elements/url'),
 	require('./elements/mention'),
 	require('./elements/hashtag'),
-	require('./elements/code')
+	require('./elements/code'),
+	require('./elements/inline-code')
 ];
 
 function analyze(source) {

src/web/app/base.styl

@@ -107,11 +107,15 @@ a
 	*
 		cursor pointer
 
+code
+	font-family Consolas, 'Courier New', Courier, Monaco, monospace
+
 pre
-	overflow auto
+	display block
 
 	> code
-		font-family Consolas, 'Courier New', Courier, Monaco, monospace
+		display block
+		overflow auto
 		tab-size 2
 
 		.comment

src/web/app/common/scripts/text-compiler.js

@@ -32,6 +32,8 @@ module.exports = function(tokens, shouldBreak, shouldEscape) {
 				return '<a>' + escape(token.content) + '</a>';
 			case 'code':
 				return '<pre><code>' + token.codeHtml + '</code></pre>';
+			case 'inline-code':
+				return '<code>' + escape(token.code) + '</code>';
 		}
 	}).join('');
 

src/web/app/desktop/tags/timeline-post.tag

@@ -232,13 +232,18 @@
 								font-style oblique
 								color #a0bf46
 
-							pre
-								padding 16px
+							code
+								padding 4px 8px
+								margin 0 0.5em
 								font-size 80%
 								color #525252
 								background #f8f8f8
 								border-radius 2px
 
+							pre > code
+								padding 16px
+								margin 0
+
 							[data-is-me]:after
 								content "you"
 								padding 0 4px

src/web/app/mobile/tags/timeline-post.tag

@@ -212,13 +212,18 @@
 								font-style oblique
 								color #a0bf46
 
-							pre
-								padding 16px
+							code
+								padding 4px 8px
+								margin 0 0.5em
 								font-size 80%
 								color #525252
 								background #f8f8f8
 								border-radius 2px
 
+							pre > code
+								padding 16px
+								margin 0
+
 							[data-is-me]:after
 								content "you"
 								padding 0 4px